3

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

4

1 回答 1

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，你会在动画填充模式中看到两个描述：

“动画的初始关键帧在动画样式应用到元素后立即应用，动画的最终关键帧在动画的最终迭代完成后继续应用。初始关键帧仅影响 -webkit 具有非零值的动画-动画延迟。”

关键部分是初始关键帧仅影响 -webkit-animation-delay 具有非零值的动画，我的修复是将 transform(scale()) 中的值更改为非负值，例如：

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

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

于 2012-08-20T20:22:18.713 回答