Css 转换缩放在Chrome上工作，但在Firefox上不工作

一旦我开始制作动画，在Chrome上就会产生连锁反应。我的圆变换放大了。在Firefox上，由于某种原因，完全相同的动画被忽略

$（“#动画”）。单击（函数（）{
$（“#square”）.toggleClass（“动画”）；
$（“#fab”）。切换类别（“ripple”）；
});
@关键帧纹波{
从{
变换：缩放（0）
}
到{
变换：比例（20）
}
}
#方格{
位置：相对位置；
宽度：300px；
高度：300px；
溢出：隐藏；
边框：1px纯红；
过渡：背景0.1s线性0.6s，变换1s；
变换：旋转（0度）；
}
#晶圆厂{
位置：绝对位置；
宽度：56px；
高度：56px；
边界半径：50%；
背景：#4FB5AB；
顶部：122px；
右：0；
变换：比例（1）；
转变：转变1s；
}
.涟漪{
动画：ripple 1s 0.5s；
转变：尺度（20）！重要；
/*持续时间-延迟*/
转换：转换0s1s！重要；
}
.制作动画{
变换：旋转（90度）！重要；
}



动画
在我开始解释代码的问题之前，这里有一句警告的话-不要同时使用过渡和动画。它们通常会导致像我们所面临的那样的问题

当在元素上指定动画时，它将完全控制正在设置动画的属性，除非有
规则！重要信息
设置。如果
！重要信息
如果使用设置，则该规则优先于动画。（但不幸的是，Chrome和Firefox似乎处理这个问题的方式不同）

根据：

CSS动画会影响计算的属性值。在动画执行期间，特性的计算值由动画控制。这将覆盖在常规样式系统中指定的值动画会覆盖所有正常规则，但会被覆盖！重要规则。

重点是我的


在您的代码中，有两个问题，如下所示：


在
.ripple
选择器中，您将
转换持续时间指定为
0s
，这意味着根本没有转换，转换的更改是即时的。正如W3C规范中所解释的，Firefox似乎（正确地）通过
将控制权赋予了规则！重要的
设置（即
.ripple
选择器中的
转换
和
转换
），因此它会在指定的
1s
延迟+后立即转换状态更改。Chrome允许动画控制，从而产生您想要的效果

Firefox似乎比Chrome更快地为元素设置动画，因此，虽然Chrome中动画的持续时间为1s就足够了，但FF需要2秒才能变慢并显示效果

+-您可以通过删除
进一步验证这一点！重要信息
规则上的设置。一次
！重要信息
已删除，动画将接管控制权


$（“#动画”）。单击（函数（）{
$（“#square”）.toggleClass（“动画”）；
$（“#fab”）。切换类别（“ripple”）；
});
@关键帧纹波{
从{
变换：缩放（0）
}
到{
变换：比例（20）
}
}
#方格{
位置：相对位置；
宽度：300px；
高度：300px；
溢出：隐藏；
边框：1px纯红；
过渡：背景0.1s线性0.6s，变换1s；
变换：旋转（0度）；
}
#晶圆厂{
位置：绝对位置；
宽度：56px；
高度：56px；
边界半径：50%；
背景：#4FB5AB；
顶部：122px；
右：0；
变换：比例（1）；
转变：转变1s；
}
#涟漪工厂{
动画：涟漪2s 1s；
变换：尺度（20）；
/*持续时间-延迟*/
转换：转换1s 1s；
}
#正方形。动画{
变换：旋转（90度）；
}



设置动画
我不确定问题出在哪里。你能详细说明一下吗？@AMACB你在firefox和Chrome上都试过动画了吗？哦，我没有看到动画按钮。嗯，这很奇怪。@AMACB你现在注意到问题了吗？我想你需要定义一个
@-moz关键帧：非常感谢！你不仅解决了我的问题，而且对造成问题的原因给了我非常详细的解释。我也不知道我可以通过使选择器更具体来覆盖css规则，但现在我知道了@不客气，伙计。很高兴知道您发现它很有用：）是的，
！重要提示
是有问题的（Firefox是一款按照规范实现的浏览器）。抱歉，请确保我们在同一页面上。但是“！important”这句话是引起问题的原因，对吗？@5parc:是的，是的。