时间戳

首页 > 解决方案 > Firefox 阴影 CSS 悬停动画不适用于 SVG

html - Firefox 阴影 CSS 悬停动画不适用于 SVG

问题描述

代码笔示例

当您将鼠标悬停在 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 更改？

先感谢您。

标签： htmlcssanimationsvgdrop-shadow

解决方案

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

-webkit-animation-fill-mode: forwards;

推荐阅读