转换规模适用于 Chrome，但不适用于 Firefox

Posted 2023-03-06

【中文标题】转换规模适用于 Chrome，但不适用于 Firefox

【英文标题】：Transform scale working on Chrome but not on Firefox

【发布时间】：2016-05-01 06:45:33

【问题描述】：

一旦我开始制作动画，在 Chrome 上我会得到涟漪效果。我的圆形变换放大了。在 Firefox 上，由于某种原因，完全相同的动画会被忽略。

$("#animate").click(function() 
  $("#square").toggleClass("animate");
  $("#fab").toggleClass("ripple");
);

@keyframes ripple 
  from 
    transform: scale(0)
  
  to 
    transform: scale(20)
  

#square 
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: background 0.1s linear 0.6s, transform 1s;
  transform: rotate(0deg);

#fab 
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4FB5AB;
  top: 122px;
  right: 0;
  transform: scale(1);
  transition: transform 1s;

.ripple 
  animation: ripple 1s 0.5s;
  transform: scale(20) !important;
  /*Duration - delay */
  transition: transform 0s 1s !important;

.animate 
  transform: rotate(90deg) !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square">
  <div id="fab"></div>
</div>
<br />
<button id="animate">animate</button>

CodePen Demo

【问题讨论】：

我不确定是什么问题。你能详细说明一下吗？

@AMACB 你在 Firefox 和 Chrome 上都试过动画了吗？

哦，我没有看到动画按钮。嗯，这很奇怪。

@AMACB 你现在注意到问题了吗？

我认为你需要定义一个@-moz-keyframe:***.com/questions/21143893/…

【参考方案1】：

在我开始解释您的代码的问题之前，请注意以下几点 - 不要同时使用过渡和动画。它们通常最终会导致像here 这样的问题。

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

根据W3C Spec：

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

^重点是我

---

在您的代码中，有两个问题，它们如下：

在.ripple 选择器中，您将transition-duration 指定为0s，这意味着根本没有转换，并且转换的变化是即时的。正如 W3C 规范中所解释的那样，Firefox 似乎（正确地）使用 !important 设置（即 .ripple 选择器中的 transform 和 transition ）将控制权交给了规则，因此它会转换状态更改紧接在指定的1s 延迟⁺ 之后。 Chrome 允许动画控制，从而产生您想要的效果。 Firefox 似乎比 Chrome 更快地为元素设置动画，因此虽然 1 秒的持续时间对于 Chrome 中的动画来说已经足够了，但 FF 需要它慢 2 秒才能显示效果。

⁺ - 您可以通过删除规则中的!important 设置来进一步验证这一点。删除!important 后，动画将获得控制权。

$("#animate").click(function() 
  $("#square").toggleClass("animate");
  $("#fab").toggleClass("ripple");
);

@keyframes ripple 
  from 
    transform: scale(0)
  
  to 
    transform: scale(20)
  

#square 
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: background 0.1s linear 0.6s, transform 1s;
  transform: rotate(0deg);

#fab 
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4FB5AB;
  top: 122px;
  right: 0;
  transform: scale(1);
  transition: transform 1s;

#fab.ripple 
  animation: ripple 2s 1s;
  transform: scale(20);
  /*Duration - delay */
  transition: transform 1s 1s;

#square.animate 
  transform: rotate(90deg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square">
  <div id="fab"></div>
</div>
<br />
<button id="animate">animate</button>

最后，请不要使用!important，除非它是强制性的。相反，只需使选择器更具体。在 sn-p 中，我使用#id.class 格式使其更加具体。

【讨论】：

非常感谢！你不仅解决了我的问题，而且只给了我一个非常详细的解释，说明是什么原因造成的。我也不知道我可以通过使选择器更具体来覆盖 css 规则，但现在我知道了！

@5parc：不客气，伙计。很高兴知道您发现它很有用 :) 是的，!important 是有问题的（Firefox 是看起来按照规范实现它的浏览器）。

抱歉，只是确保我们在同一页面上。但是“！重要”行是导致问题的行吗？

@5parc：是的，他们是。