多个webkit动画 [英] Multiple webkit animations
问题描述
我试图一次运行多个webkit动画。演示可以在此处查看：
I'm trying to run multiple webkit animations at once. Demo can be seen here:
HTML：
<body>
<div class="dot"></div>
</body>
JavaScript：
JavaScript:
$(function(){
$('body').append('<div class="dot" style="left:100px; top:200px"></div>');
});
CSS：
body{
background: #333;
}
.dot{
background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
border-radius: 6px;
background: red;
display: block;
height: 6px;
position: absolute;
margin: 40px 0 0 40px;
width: 6px;
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-animation: shrink 2.s ease-out;
-webkit-animation: pulsate 4s infinite ease-in-out;
}
@-webkit-keyframes shrink{
0%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(2);
}
50%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1.5);
}
100%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes pulsate{
0%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
50%{
-webkit-transform: scale(1.1);
-webkit-box-shadow: 0 0 2px 2px #111;
}
100%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
}
.dot有两个动画：
.dot has two animations:
- 收缩
- 脉动（很难看到，但它在那里）
也许我需要找到一个好的方式同步他们。一旦缩小动画完成，脉动。我不能同时运行它们，所以pulsate在.dot中注释掉了。
Perhaps I need to find a good way sync them. Once shrink animation is done, pulsate. I can't run them both at once so pulsate is commented out in .dot.
有任何建议吗？感谢。
推荐答案
您可以使用，如果需要，第二个延迟：
You can separate multiple animations with a , and set a delay on the second one if needed:
-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
2s
从Chrome 43和Safari 9 / 9.2开始， -webkit - 前缀只需要Blackberry和UC（Android）浏览器。所以新的正确语法是
Since Chrome 43 and Safari 9/9.2, the -webkit- prefix is only needed for Blackberry and UC (Android) browser. So the new correct syntax would be
animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
这篇关于多个webkit动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
