利用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; 
    } 
} 

我不會接受這個答案，因爲我認爲它仍然需要一個解釋。