同一元素上的多个CSS3动画

Question

我在这里有一个与CSS3动画有关的小问题。

我想运行动画，而不是再次运行它反向。为了做到这一点，我用：

-webkit-animation: moveKv 1s forwards, moveKv 1s forwards 2s reverse;

我的关键帧就是这样的：

@-webkit-keyframes 'moveKv' {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(180deg); }
}

在chrome金丝雀中，一切都很好，但在稳定的铬中却不起作用。由于某种原因，一旦我添加延迟动画停止工作。

这是小提琴

编辑：好的，让我告诉你我最终想要什么。http://jsfiddle.net/57dw8/5/

编辑2：实际上原因很简单。使用2动画相同的名字不支持在稳定的铬在目前的帖子被创建。

Answer 1

这是答案..。

小提琴：http://jsfiddle.net/nikhilvkd/57dw8/3/

.banner {
    position: absolute;
    top: 0; left: 0;
    width: 100px;
    height: 100px;
    -webkit-animation: moveKv infinite 2000ms;/*change here*/
    background: #000;
}


@-webkit-keyframes moveKv {
            0% { -webkit-transform: rotate(0deg); }
            50% { -webkit-transform: rotate(180deg); }
            100% { -webkit-transform: rotate(0deg); }
        }

Answer 2

你应该使用两个属性-

animation-direction: alternate;
animation-iteration-count: 2;

动画-方向-配置动画是否应该交替方向在每次运行，通过序列或重置到起点，并重复自己。

动画-迭代-计数-配置动画应该重复的次数；您可以指定无限重复动画。

必须阅读：动画