最新版 Chrome 中的 CSS3 动画变化？

Posted 2023-03-06

【中文标题】最新版 Chrome 中的 CSS3 动画变化？

【英文标题】：CSS3 animation changes in latest version of Chrome?

【发布时间】：2012-08-11 19:02:45

【问题描述】：

看看这个 JSFiddle：http://jsfiddle.net/Grimdotdotdot/URrLW/

在 Firefox 中，它的动画效果与预期一样 - 里面的红色圆圈一圈又一圈，外面的蓝色圆圈以不同的速度向另一方向旋转并淡入淡出。

这曾经在 Chrome 中运行良好，但自从最新更新到 21.0.1180.75 m 后，外部蓝色圆圈已停止旋转。

这是 Chrome 上动画的 CSS：

@-webkit-keyframes spinPulse 
    0%  -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; 
    40%  -webkit-transform:rotate(145deg); opacity:1;
    80%  -webkit-transform:rotate(-320deg); opacity:0; 
    100%  -webkit-transform:rotate(-320deg); opacity:0; 

问题在于不透明度 - 如果我将其移除，那么动画效果很好（尽管它会在最后跳转，因为你可以看到它）：http://jsfiddle.net/Grimdotdotdot/BVXwR/

这是一个错误，还是我的 CSS 写错了？

加分项：如何在 IE9 中实现相同的动画？

【问题讨论】：

在获得我的版本号时意识到 Chrome 更新到 21.0.1180.79 m，但它也被破坏了 =[

使用元素检查器，我注意到检查器认为它是动画，所以我提交了一个错误报告。 code.google.com/p/chromium/issues/detail?id=142859

【参考方案1】：

所以我也有类似的情况。我正在尝试为给定页面中的多个 div 设置动画，尽管它们在源代码中呈现，但它们（及其子元素）在最新的 Chrome 中完全不透明。我相信（就我而言）我已经解决了这个问题。我在 rails 应用程序中使用了thoughtbot 的人的 sass 和 Bourbon mixin lib，但情况相似。我不确定这是否真的可以被视为一个错误，因为该解决方案确实在 webkit 规范的某些地方进行了概述 - 事实上，就目前而言，Chrome 似乎是唯一能够做到这一点的人 - 正确 - 因为它看起来像他们刚刚开始支持这一点（虽然 safari 没有？）它被提及。无论如何，当尝试使用两者的动画填充模式对变换进行动画处理时，这一点很明显。我已经验证这适用于旧版本的 Chromium 和 Safari。这是自最近一次 Chrome 更新以来在我们的应用程序中发生的最近一个问题。反正我的sass代码是这样的

.animation-tilefill 
  @include animation(tilefill 0.25s $ease-out-sine);
  @include animation-fill-mode(both); 

@mixin tilefill 
  0% 
    opacity: 0;
     // @include transform(scale(0.0)); // <= There's our issue
     // @include transform-origin(left top); 
  
  80% 
     // @include transform(scale(1));
  
  100% 
    opacity: 1;
  

@-webkit-keyframes tilefill  @include tilefill; 
   @-moz-keyframes tilefill  @include tilefill; 
        @keyframes tilefill  @include tilefill; 

您必须了解一点波旁威士忌和 sass 才能知道这是在做什么，但对于这个答案的需要，只要说它对比例变换和元素的不透明度进行动画处理就足够了。这段代码的问题与变换本身无关，而是 0.0 VALUE - 零值是关键。如果您看这里：Safari CSS Reference，您将在动画填充模式 both 描述中看到：

"动画的初始关键帧被应用到动画 样式应用于元素，动画的最终关键帧 动画最后一次迭代后继续应用 完成。初始关键帧仅影响具有 -webkit-animation-delay 的非零值。”

关键部分是 初始关键帧仅影响 -webkit-animation-delay 具有非零值的动画 我的解决方法是将 transform(scale()) 中的值更改为非- 否定的如：

  0% 
    opacity: 0;
     @include transform(scale(0.01)); // <= There's our issue
     @include transform-origin(left top); 
  

一旦更改，问题就解决了 - 希望这会有所帮助。我想知道有些人对此的支持有何看法:)

【讨论】：

我已经摆弄了小提琴（原样），将所有值更改为正值似乎没有什么不同 - 只有当我删除所有不透明度更改时它才会开始旋转动画（不仅仅是在初始关键帧中）。不过，很高兴您的工作正常，并感谢您的详细回复。