我试图一次运行多个webkit动画。演示可以
be seen here：
HTML：
<body> <div class="dot"></div> </body>
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;
}
}
。有两个动画：
>收缩
>脉动(很难看到，但它在那里)
也许我需要找到一个好的方式同步他们。一旦缩小动画完成，脉动。我不能一次运行它们，所以pulsate被注释掉.dot。
有什么建议么？谢谢。
解决方法
您可以使用a分隔多个动画，如果需要，可以在第二个动画上设置延迟：
-webkit-animation: shrink 2s ease-out,pulsate 4s 2s infinite ease-in-out;
第二个动画中的2s是延迟
从Chrome 43和Safari 9 / 9.2开始，-webkit-前缀仅用于Blackberry和UC(Android)浏览器。所以新的正确语法将是
animation: shrink 2s ease-out,pulsate 4s 2s infinite ease-in-out;
