利用CSS下拉阴影的元件上过渡不透明度滤光器

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类它的元素会像预期的那样淡入淡出，但是当过渡时间结束时，模糊会减少......模糊。这就像过渡期间的价差扩大一样。如果我删除了转换，它会在转换动画完成后切换到元素在最终状态下的样子。

在模糊元素上过滤不透明度会导致模糊在动画完成之前变得如此明显吗？这对铬来说并不是那么糟糕，但它在Safari上更显着。这真的很动听。我也尝试了不透明度的关键帧动画，但同样的事情仍然发生。它也不影响text-shadow，只有filter: drop-shadow。

Answer 1

好，所以我想出了如何让它做我想做的事，但我不知道它为什么起作用。似乎在铬，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; 
    } 
} 

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