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

Question

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?

is jQuery or a similar library an option? You'd probably see better browser support. — Surreal Dreams
– Surreal Dreams, Commented Jan 25, 2011 at 19:04
jQuery is available but not really applicable in my case. I don't need other browser support as this will be running in Adobe Air only. I'm trying to stick with css animations instead of javascript. — David Murdoch
– David Murdoch, Commented Jan 25, 2011 at 19:07
Relevant: Firmin - JavaScript animation library using CSS transforms and transitions — a paid nerd
– a paid nerd, Commented Nov 22, 2011 at 7:44
For all browsers: see javascript - Restart animation in CSS3: any better way than removing the element? - Stack Overflow — user202729
– user202729, Commented Jan 28, 2019 at 2:07

6 revs, 5 users 81% · Accepted Answer · 2013-01-21 14:01:55Z

96

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. :-)

edited Jan 21, 2013 at 14:01

community wiki

6 revs, 5 users 81%
David Murdoch

Sign up to request clarification or add additional context in comments.

3 Comments

Tomas Ramirez Sarduy Over a year ago

the cited source code has been moved to github.com/louisremi/jquery.transition.js

David Murdoch Over a year ago

Note: the code in the github repo has changed since this answer; the code there and the code here are completely different now.

user202729 Over a year ago

Note that if there is an CSS rule that assigns the animation to the object, setting it to '' would make it inherit from the CSS rule, in that case it's necessary to set it to none.

gilly3 · Accepted Answer · 2011-01-25 19:45:51Z

14

You have to first remove the animation, then add it again. Eg:

document.getElementById("box").style.webkitAnimationName = "";
setTimeout(function ()
{
    document.getElementById("box").style.webkitAnimationName = "shake";
}, 0);

To do this without setTimeout remove the animation during onmousedown, and add it during onclick:

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

edited Jan 25, 2011 at 19:45

answered Jan 25, 2011 at 19:27

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

2 Comments

David Murdoch Over a year ago

Yah, this is the same as what I came up with. But I'd like to do without the setTimeout if possible.

gilly3 Over a year ago

I've updated my answer with an alternative that does not use setTimeout.

Debby Mendez · Accepted Answer · 2017-01-09 21:00:26Z

8

Following the suggestion from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips, remove and then add the animation class, using requestAnimationFrame to ensure that the rendering engine processes both changes. I think this is cleaner than using setTimeout, and handles replaying an animation before the previous play has completed.

$('#shake-the-box').click(function(){   
  $('#box').removeClass("trigger");
  window.requestAnimationFrame(function(time) {
  window.requestAnimationFrame(function(time) {
      $('#box').addClass("trigger");
    });
    });

});

http://jsfiddle.net/gcmwyr14/5/

answered Jan 9, 2017 at 21:00

Debby Mendez

81112 silver badges18 bronze badges

1 Comment

SamuraiNinjaRobot Over a year ago

The person is using CSS/JavaScript, and I believe this is using jQuery

Puyol · Accepted Answer · 2012-06-30 19:01:50Z

6

A simple but effective alternative:

HTML:

<div id="box"></div>
<button id="shake-the-box">Shake it!</button>

css:

#box{
    background: blue;
    margin:30px;
    height:50px;
    width:50px;
    position:relative;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1; 
}
#box.trigger{
    display:table;
}
@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}
@-moz-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

jQuery:

$('#shake-the-box').click(function(){

  $('#box').toggleClass('trigger');

});

Demo:
http://jsfiddle.net/5832R/2/

Issues:
I don't know if it works on Firefox, because the animation doesn't seem to work there...

answered Jun 30, 2012 at 19:01

Puyol

3,1195 gold badges27 silver badges33 bronze badges

1 Comment

Snowman Over a year ago

This works, but for some reason the overflow rule is ignored..I have it set to hidden but after the animation overflow shows

user · Accepted Answer · 2017-09-15 18:28:37Z

3

Reset the value first. Use reflow to apply the change without using timeout:

function shake() {
  var box = document.getElementById("box");
  box.style.animationName = null;
  box.offsetHeight; /* trigger reflow */
  box.style.animationName = "shake";
}

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

#box {
    position: absolute;
    width: 75px; height: 75px;
    background-color: black;
    animation-duration: .02s;
    animation-iteration-count: 10;
    animation-timing-function: linear;
}

button {
    position: absolute;
    top: 100px;
}

<div id="box"></div>
<button onclick="shake()">Shake</button>

In contrast to the accepted answer that recommends animationEnd, this method resets the animation even when it's still in progress. This might be or might be not what you want.

An alternative would be to create a duplicate @keyframes animation and switch between the two:

function shake() {
  var box = document.getElementById("box");
  if (box.style.animationName === "shake")
      box.style.animationName = "shake2";
  else
      box.style.animationName = "shake";
}

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

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

#box {
    position: absolute;
    width: 75px; height: 75px;
    background-color: black;
    animation-duration: .02s;
    animation-iteration-count: 10;
    animation-timing-function: linear;
}

button {
    position: absolute;
    top: 100px;
}

<div id="box"></div>
<button onclick="shake()">Shake</button>

edited Sep 15, 2017 at 18:28

answered Jul 11, 2017 at 14:33

user

26.2k13 gold badges118 silver badges104 bronze badges

2 Comments

user719662 Over a year ago

note: per stackoverflow.com/questions/21664940/…, it may be better to use e.g. void( box.offsetHeight); instead, because statement with var access and with no effect may be optimized out (and will trigger linters to emit warnings like Unexpected expression '.' in statement position. - courtesy of JSLint)

user719662 Over a year ago

also, note that reflows are quite "heavy" (computationally intensive) operations.

user3026911 · Accepted Answer · 2017-07-18 18:46:49Z

2

Clone works pretty good on paused Karaoke: On IE11 had to force a reflow (R. Krupiński's shorter version).

$('#lyrics').text("Why does it hurt when I pee?");
changeLyrics('3s');  

function changeLyrics(sec) {
  str = 'lyrics '+ sec + ' linear 1';
  $('#lyrics').css( 'animation', str);
  $('#lyrics').css( 'animation-play-state', 'running' );
  $('#lyrics').replaceWith($('#lyrics').clone(true)); 
}

or you can use the following:

function resetAnimation(elm) {
  $('#'+elm).replaceWith($('#'+elm).clone(true)); 
}

edited Jul 18, 2017 at 18:46

user719662

answered Jul 17, 2016 at 18:20

user3026911

519 bronze badges

Comments

Jeremy Lynch · Accepted Answer · 2018-03-01 02:43:57Z

1

Is there an issue with using setTimeout() to remove the class and then read it 5ms later?

svg.classList.remove('animate');
setTimeout(function() {
  svg.classList.add('animate');
}, 10);

answered Mar 1, 2018 at 2:43

Jeremy Lynch

7,3003 gold badges59 silver badges68 bronze badges

Comments

Nico Prat · Accepted Answer · 2012-03-23 08:31:54Z

0

With your javascript, you could also add (and then remove) a CSS class in which the animation is declared. See what I mean ?

#cart p.anim {
  animation: demo 1s 1; // Fire once the "demo" animation which last 1s
}

answered Mar 23, 2012 at 8:31

Nico Prat

7062 gold badges6 silver badges13 bronze badges

Comments

Raein Hashemi · Accepted Answer · 2015-01-21 08:32:13Z

0

1) Add animation name to the #box.trigger in css

#box.trigger{
    display:table;
    animation:shake .2s 0 linear 1;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1;
}

2) In java-script you cannot remove the class trigger.

3) Remove the the class name by using setTimeOut method.

$(document).ready(function(){
    $('#shake-the-box').click(function(){

    $('#box').addClass('trigger');
    setTimeout(function(){
        $("#box").removeClass("trigger")},500)        
    });
});

4) Here is the DEMO.

edited Jan 21, 2015 at 8:32

Raein Hashemi

3,3844 gold badges25 silver badges33 bronze badges

answered Jan 21, 2015 at 7:58

Vamsi Velaga

157 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

3 Comments

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Linked

Related