多WebKit的动画 [英] Multiple webkit animations

问题描述

我试图同时运行多个WebKit的动画。演示可以看这里： http://jsfiddle.net/ialphan/fLNyS/

I'm trying to run multiple webkit animations at once. Demo can be seen here: http://jsfiddle.net/ialphan/fLNyS/

.DOT有两个动画：1）收缩，2）跳动（很难看到，但它的存在）。

.dot has two animations: 1) shrink, 2) pulsate (hard to see but it's there).

也许，我需要找到一个很好的方式同步。一旦收缩动画完成，搏动。我不能在运行它们都曾经如此脉动在.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;

2秒第二动画是延迟

由于Chrome的43和Safari 9 / 9.2，在 -webkit - 只需要黑莓和UC（Android版）的浏览器 preFIX。因此，新的正确的语法是

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屋！