Question

我有一个带有阴影css滤镜模糊的svg元素，如下所示：

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

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

当包含div应用了active类时，元素会按预期淡入，但是当转换时间结束时，模糊会减少...模糊。就像在过渡期间传播增加一样。如果我删除了转换，它会在转换动画完成后切换到元素在最终状态下的样子。

在具有模糊的元素上转换不透明度是什么原因导致模糊在动画完成之前更加明显？它在铬上并没有那么糟糕，但它在野生动物园中更为明显。这真的很刺耳。我也尝试了关键帧动画的不透明度，但同样的事情仍然发生。它也不会影响text-shadow，只影响filter: drop-shadow。

Answer 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;
  }
}

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

使用css投影滤镜

1 个答案: