我在这里有一个与 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 个同名动画。
最佳答案
这不是最干净的方法,但既然你的动画就是这么简单:为什么不使用两个具有相同持续时间的动画(一个向前,一个向后)并对第二个应用 1T 延迟(从第一个结束开始) ?
.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 , 所以你现在可以跨浏览器运行它了。
关于css - 同一元素上的多个 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21042315/