Firefox 阴影 CSS 悬停动画不适用于 SVG答案

【问题标题】：Firefox drop-shadow CSS hover animation not working on SVGFirefox 阴影 CSS 悬停动画不适用于 SVG
【发布时间】：2018-07-17 02:34:57
【问题描述】：

Codepen Example

当您将鼠标悬停在 Chrome 中的徽标上时，动画会起作用。

  .logo_animate:hover{
    -webkit-filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-1px 0px .02px 
    #705C12) drop-shadow(2px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) 
    drop-shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
    shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
    shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-5px 0px .02px #705C12) 
    drop-shadow(-.02px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) drop- 
   shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
   shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
   shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    stroke: #fff59d;
   }

当您在 Firefox 中将鼠标悬停在徽标上时，它会在“mouseout”上启动动画（不使用 Javascript，但这就是效果）。

为什么 Firefox 在 SVG 上悬停时不触发 CSS 更改？

提前谢谢你。

【问题讨论】：

标签： html css animation svg drop-shadow

【解决方案1】：

对我来说，它在 Chrome 和 Firefox 中的工作方式与此行相同：

-webkit-animation-fill-mode: forwards;

【讨论】：