Menu
I'm trying to run multiple webkit animations at once. Demo can 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; } } .dot has two animations:
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.
Any suggestions? Thanks.
389
While it is true that you cannot play two transform animations at the same time (because one transform would overwrite the other), it is not correct to say "You cannot play two animations since the attribute can be defined only once." See the accepted answer about using comma-separated values with animations.
You can animate multiple properties inside a keyframe rule and use multiple keyframes to specify an element's property values at specific points in time. For example, suppose you have an element that you want to animate from one position to another, horizontally.
WebKit now supports explicit animations in CSS. As a counterpart to transitions, animations provide a way to declare repeating animated effects, with keyframes, completely in CSS. With a recent nightly build, you can see the above animation in action.
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 in the second animation is the delay
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; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
