css - 同一元素上的多个 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 canary 中一切正常，但在稳定的 chrome 中不起作用。出于某种原因，一旦我添加延迟动画就会停止工作。

这是 jsfiddle

编辑:好的，让我最终向您展示我想要的东西。 http://jsfiddle.net/57dw8/5/

编辑 2:其实原因很简单。在创建帖子时，稳定的 chrome 不支持使用 2 个同名动画。

Answer 1

这不是最干净的方法，但既然你的动画就是这么简单:为什么不使用两个具有相同持续时间的动画(一个向前，一个向后)并对第二个应用 1T 延迟(从第一个结束开始) ？

Running Example

.wrap { position: relative; }

.banner {
    position      : absolute;
    top           : 0; 
    left          : 0;
    width         : 100px;
    height        : 100px;
    background    : #000;

    border-left   : 10px solid red;
    border-right  : 10px solid green;
    border-bottom : 10px solid blue;
    border-top    : 10px solid yellow;

    -webkit-animation : moveForward 1s, 1s moveBackward 1s;
}

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

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

我在 Fiddle 中的代码前面加上了 Nettus Prefixr , 所以你现在可以跨浏览器运行它了。