Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule:

@-webkit-keyframes shake {     0% {         left: 0;     }     25% {         left: 12px;     }     50% {         left: 0;     }     75% {         left: -12px;     }     100% {         left:0;     } } 

And some CSS defining some of the animation rules on my box:

#box{     -webkit-animation-duration: .02s;     -webkit-animation-iteration-count: 10;     -webkit-animation-timing-function: linear; } 

I can shake the #box like this:

document.getElementById("box").style.webkitAnimationName = "shake"; 

But I can't shake it again later.

This only shakes the box once:

someElem.onclick = function(){     document.getElementById("box").style.webkitAnimationName = "shake"; } 

How can I re-trigger a CSS animation via JavaScript without using timeouts or multiple animations?

like image 798
David Murdoch Avatar asked Jan 25 '11 19:01

David Murdoch


People also ask

How do you trigger transitions in JavaScript?

To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.

Does CSS animation use JavaScript?

CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS. Use JavaScript when you need significant control over your animations.

What is WebKit in CSS animation?

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.


1 Answers

I found the answer based on the source code and examples at the CSS3 transition tests github page.

Basically, CSS animations have an animationEnd event that is fired when the animation completes.

For webkit browsers this event is named “webkitAnimationEnd”. So, in order to reset an animation after it has been called you need to add an event-listener to the element for the animationEnd event.

In plain vanilla javascript:

var element = document.getElementById('box');  element.addEventListener('webkitAnimationEnd', function(){     this.style.webkitAnimationName = ''; }, false);  document.getElementById('button').onclick = function(){     element.style.webkitAnimationName = 'shake';     // you'll probably want to preventDefault here. }; 

and with jQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){     this.style.webkitAnimationName = ''; });  $('#button').click(function(){     $element.css('webkitAnimationName', 'shake');     // you'll probably want to preventDefault here. }); 

The source code for CSS3 transition tests (mentioned above) has the following support object which may be helpful for cross-browser CSS transitions, transforms, and animations.

Here is the support code (re-formatted):

var css3AnimationSupport = (function(){     var div = document.createElement('div'),         divStyle = div.style,         // you'll probably be better off using a `switch` instead of theses ternary ops         support = {             transition:                 divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :                 // Will ms add a prefix to the transitionend event?                 (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :                 (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :                 (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :                 (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :                 false)))),             transform:                 divStyle.MozTransform     === '' ? 'MozTransform'    :                 (divStyle.MsTransform     === '' ? 'MsTransform'     :                 (divStyle.WebkitTransform === '' ? 'WebkitTransform' :                  (divStyle.OTransform      === '' ? 'OTransform'      :                 (divStyle.transform       === '' ? 'transform'       :                 false))))             //, animation: ...         };     support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();     return support; }()); 

I have not added the code to detect “animation” properties for each browser. I’ve made this answer “community wiki” and leave that to you. :-)

like image 60
6 revs, 5 users 81% Avatar answered Sep 25 '22 17:09

6 revs, 5 users 81%