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

Question

看看这个 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 中实现相同的动画？

Answer 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); 
  }

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