CSS：奇怪的盒子阴影过渡答案

【问题标题】：CSS: Weird box shadow transitionCSS：奇怪的盒子阴影过渡
【发布时间】：2017-06-28 16:04:25
【问题描述】：

我有一个与它旁边的元素颜色相同的盒子阴影，我使用 CSS 过渡来淡入它们。 box-shadows 和 background-color 的 css 过渡是相同的，所以我不明白为什么它们似乎以不同的速度淡入。

Here a jsfiddle to reproduce the issue，这里是相关的 SCSS：

.right-of-blue {
  box-shadow: 8px 0 transparent;
}

.outline, .background {
  border-color: transparent;
  background-color: transparent;
}

// Clicking the button toggles this class on the wrapper div
.colors-enabled {
  .should-animate {
    transition:
    background-color .5s,
    box-shadow .5s,
    border-color .5s;
  }

  .outline {
    border-width: 1px 2px;
    margin: 0 -2px;
    background: none !important;
    border-style: solid;
  }

  .background {
    border-width: 1px;
    margin: 0 -1px;
    border-style: solid;
  }

  .red {
    border-color: $red;
    background-color: $red;
  }

  .blue {
    border-color: $blue;
    background-color: $blue;
  }

  .right-of-blue {
    box-shadow: 8px 0 $blue;

    // Bump the outline/background of the next segment over to make room for the box shadow
    & + span.outline {
      margin-left: 0;

      // Bump the text inside back to keep it from moving
      & > span > span {
        margin-left: -2px;
      }
    }
  }
}

【问题讨论】：

我看到outline should-animate blue 两次。也许第二个元素可能看起来像如果有区别。我尝试将border-color: black; border-width: 2px; 放入“Hello”和“World”。检查您是否看到不同的费率。另外，请尝试在“Hello”和“World”之间留一些空间。

标签： css css-transitions box-shadow

【解决方案1】：

在我看来，这不是因为不同的费率。你会有这种感觉，因为当蓝色背景的不透明度为 0.25 时，阴影也为 0.25。所以两个0.25的不透明度重叠让你感觉它是0.5；

我改变了你的小提琴以避免重叠，我也删除了重叠的边框颜色。你可以看到速率不像以前那样感觉了。

.right-of-blue {
  box-shadow: 0 8px transparent;
}

在这里查看：

https://jsfiddle.net/ahmadm/kxyua0dj/

【讨论】：