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应用程序中使用思想机器人的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; }

你必须知道一点波本威士忌并且知道这是做什么的，但是对于这个答案的需要，足以说明它的动画缩放变换以及元素的不透明度。此代码的问题与转换本身无关，但 0.0 VALUE - 零值是键。如果你看这里：Safari CSS Reference你会在动画填充模式两个描述中看到：

“动画的动画初始关键帧将立即应用 style应用于元素，以及动画的最终关键帧在动画的最后一次迭代后继续应用完成。初始关键帧仅影响具有a的动画 -webkit-animation-delay的非零值。“

关键部分是初始关键帧只会影响-webkit-animation-delay的非零值的动画我的修复方法是将转换中的值（scale（））更改为非 - 例如：

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

一旦改变，问题就解决了 - 希望这会有所帮助。我想知道一些人如何看待这种支持：）

CSS3动画在最新版Chrome中有变化吗？

1 个答案: