CSS 多个 webkit 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12590562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple webkit animations
提问by ialphan
I'm trying to run multiple webkit animations at once. Demo can be seen here:
我正在尝试一次运行多个 webkit 动画。演示可以在这里看到：
HTML:
HTML：
<body>
<div class="dot"></div>
</body>
JavaScript:
JavaScript：
$(function(){
$('body').append('<div class="dot" style="left:100px; top:200px"></div>');
});
CSS:
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 has two animations:
.dot 有两个动画：
- shrink
- pulsate (hard to see but it's there)
- 收缩
- 脉动（很难看到，但它在那里）
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.
也许我需要找到一种同步它们的好方法。收缩动画完成后，脉动。我不能同时运行它们，所以 pulsate 在 .dot 中被注释掉。
Any suggestions? Thanks.
有什么建议？谢谢。
回答by Giona
You can separate multiple animations with a ,and set a delay on the second one if needed:
,如果需要，您可以使用 a 分隔多个动画并在第二个动画上设置延迟：
-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
2sin the second animation is the delay
2s在第二个动画中是延迟
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
从 Chrome 43 和 Safari 9/9.2 开始，-webkit-只有 Blackberry 和 UC (Android) 浏览器需要前缀。所以新的正确语法是
animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
