css - 如何在 CSS 动画的不同关键帧上启动不同的元素

Question

如果我有一个 CSS 动画，我想创建该动画的多个实例，但从动画的不同阶段开始，我该如何指定。

我想象的是这样的，第二行webkit是伪代码:

 #cell1
  {
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  }

Answer 1

据我了解规范，animation-delay 的负值可以解决问题:

http://www.w3.org/TR/css3-animations/#animation-delay

If the value for 'animation-delay' is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative 'animation-delay', the starting values are taken from the moment the animation is applied.

编辑:确实，这适用于我的 Chrome :http://jsfiddle.net/GvUzX/