使用 css 阴影过滤器在元素上转换不透明度答案

【问题标题】：Transitioning opacity on an element with css drop-shadow filter使用 css 阴影过滤器在元素上转换不透明度
【发布时间】：2017-08-26 23:52:21
【问题描述】：

我有一个 svg 元素，它应用了阴影 css 滤镜模糊，如下所示：

.my-svg {
  opacity: 0;
  filter: drop-shadow( 0px 0px 10px rgba(255, 0, 0, 1) );
}

.active & {
  transision: opacity 1s;
  opacity: 1;
}

当包含的 div 应用了 active 类时，元素会按预期淡入，但是当过渡时间结束时，模糊会减少到不那么……模糊。这就像在过渡期间扩大了传播。如果我删除过渡，它会切换到过渡动画完成后元素的最终状态。

在带有模糊的元素上过渡不透明度会导致模糊在动画完成之前更加明显，这是怎么回事？它在 chrome 上并没有那么糟糕，但在 safari 上更为明显。这真的很刺耳。我也尝试过不透明度的关键帧动画，但同样的事情仍然发生。它也不会影响text-shadow，只会影响filter: drop-shadow。

【问题讨论】：

标签： css animation safari blur

【解决方案1】：

好的，所以我想出了如何让它做我想做的事，但我不知道它为什么会起作用。似乎适用于 chrome、ff 和 safari。

使用关键帧动画和过渡效果。如果你只使用关键帧，它就不起作用，如果你只使用过渡，它就不起作用。这是有效的代码：

.my-svg {
  opacity: 0;
  filter: drop-shadow( 0px 0px 10px rgba(255, 0, 0, 1) );
}

.active & {
  animation: fadein 1s;
  animation-fill-mode: forwards;
  transition: opacity 1s;
  opacity: 1;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

我不会接受这个答案，因为我认为它仍然需要解释。

【讨论】：