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金丝雀的一切都运行正常，但它不能在稳定的镀铬中工作。出于某种原因，一旦我添加延迟动画停止工作。

此处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); }
}

我已经在小提琴中添加了Nettus Prefixr的代码，因此您现在可以将它运行为crossbrowser。

Answer 2

这是答案......

小提琴：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 3

您应该使用两个属性 -

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

animation-direction - 配置动画是否应该在序列的每次运行中交替方向，或者重置为起点并重复自身。

animation-iteration-count - 配置动画应重复的次数;你可以指定无限以无限期地重复动画。

必读：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

同一元素上的多个CSS3动画

3 个答案: