How to Re-Trigger a Webkit CSS Animation Via JavaScript

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

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

Trigger CSS Animations in JavaScript

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:

How do I add a class to a given element?

If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.

All you have to do then is set a transition to a given element like this:

.el {
    width:10px;
    transition: all 2s;
}

And then change its state if the element has a class:

.el.addedclass {
    width:20px;
}

Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.

There is a similar question here: Trigger a CSS keyframe animation via scroll

Restart CSS3 animation using Javascript

You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:

// Define a function that listens to all prefix variants of endanimation events:function whenAnimationEnd(element, callback) {    element.addEventListener('animationend', callback, false);    element.addEventListener('webkitAnimationEnd', callback, false);    element.addEventListener('oanimationend', callback, false);    element.addEventListener('MSAnimationEnd', callback, false);}
(function repeat() {  whenAnimationEnd(document.querySelector('.click_through2'), function(e) {    var container = document.querySelector('.ad_container');    var dupe = container.cloneNode(true);    container.parentNode.replaceChild(dupe, container);    repeat();  });}());

 .ad_container {     height: 250px;     position: relative;     width: 300px;     overflow: hidden; } .ad_container div, .ad_container a, .logo, .sfv2 {  position: absolute; } .title {     bottom: 45px;     left: 5px;     right: 5px; } .title h2 {     color: #fff;     font-family: Helvetica,arial,sans-serif;     font-size: 21px;     font-weight: 400;     line-height: 1;     margin: 0;     text-align: center; } .click_through {     background-color: #fff200;     border-radius: 5px;     bottom: 12px;     box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);     color: #ce1e25;     font-family: Helvetica,arial,sans-serif;     font-size: 14px;     font-weight: 700;     left: 0;     line-height: 1;     margin: 0 auto;     padding: 5px;     right: 0;     text-align: center;     width: 70px;     text-decoration: none; } .click_through1 {  animation: tbio 0.7s ease-out 0s both;  -moz-animation: tbio 0.7s ease-out 0s both;  -webkit-animation: tbio 0.7s ease-out 0s both;  -ms-animation: tbio 0.7s ease-out 0s both;  -o-animation: tbio 0.7s ease-out 0s both; } .click_through2 {  animation: tbio 0.7s ease-out 1s both;  -moz-tbio tbio 0.7s ease-out 1s both;  -webkit-tbio tbio 0.7s ease-out 1s both;  -ms-tbio tbio 0.7s ease-out 1s both;  -o-tbio tbio 0.7s ease-out 1s both;  width: 80px; } .logo {  top: 8px;  left: 8px; } .title1 {  animation: ltrio 0.6s ease 0s both;  -moz-animation: ltrio 0.6s ease 0s both;  -webkit-animation: ltrio 0.6s ease 0s both;  -ms-animation: ltrio 0.6s ease 0s both;  -o-animation: ltrio 0.6s ease 0s both; } .title2, .title3 {  opacity: 0; } .title2 {  animation: ltrio 0.6s ease 0.55s both;  -moz-animation: ltrio 0.6s ease 0.55s both;  -webkit-animation: ltrio 0.6s ease 0.55s both;  -ms-animation: ltrio 0.6s ease 0.55s both;  -o-animation: ltrio 0.6s ease 0.55s both; } .title3 {  animation: ltrio 0.6s ease 1s both;  -moz-nimation: ltrio 0.6s ease 1s both;  -webkit-nimation: ltrio 0.6s ease 1s both;  -ms-onimation: ltrio 0.6s ease 1s both;  -o-nimation: ltrio 0.6s ease 1s both; } .sfv2 {     right: 12px;     top: 34px;     animation: fio 0.6s ease 1.1s both;     -moz-animation: fio 0.6s ease 1.1s both;     -webkit-animation: fio 0.6s ease 1.1s both;     -ms-animation: fio 0.6s ease 1.1s both;     -o-animation: fio 0.6s ease 1.1s both; }  @keyframes ltrio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } } @-moz-keyframes ltrio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } }
 @-ms-keyframes ltrio {  0% {   -ms-transform: translateY(-350px);   opacity: 0;  }  25% {   -ms-transform: translateY(0);   opacity: 1;  }  75% {   -ms-transform: translateY(0);   opacity: 1;  }  100% {   -ms-transform: translateY(350px);   opacity: 0;  } } @-o-keyframes ltrio {  0% {   -o-transform: translateX(-350px);   opacity: 0;  }  25% {   -o-transform: translateX(0);   opacity: 1;  }  75% {   -o-transform: translateX(0);   opacity: 1;  }  100% {   -o-transform: translateX(350px);   opacity: 0;  } } @keyframes tbio {  0% {   transform: translateY(350px);   opacity: 0;  }  25% {   transform: translateY(0);   opacity: 1;  }  75% {   transform: translateY(0);   opacity: 1;  }  100% {   transform: translateY(350px);   opacity: 0;  } } @-moz-keyframes tbio {  0% {   -moz-transform: translateY(350px);   opacity: 0;  }  25% {   -moz-transform: translateY(0);   opacity: 1;  }  75% {   -moz-transform: translateY(0);   opacity: 1;  }  100% {   -moz-transform: translateY(350px);   opacity: 0;  } } @-webkit-keyframes tbio {  0% {   -webkit-transform: translateY(350px);   opacity: 0;  }  25% {   -webkit-transform: translateY(0);   opacity: 1;  }  75% {   -webkit-transform: translateY(0);   opacity: 1;  }  100% {   -webkit-transform: translateY(350px);   opacity: 0;  } } @-ms-keyframes tbio {  0% {   -ms-transform: translateY(350px);   opacity: 0;  }  25% {   -ms-transform: translateY(0);   opacity: 1;  }  75% {   -ms-transform: translateY(0);   opacity: 1;  }  100% {   -ms-transform: translateY(350px);   opacity: 0;  } } @-o-keyframes tbio {  0% {   -o-transform: translateY(350px);   opacity: 0;  }  25% {   -o-transform: translateY(0);   opacity: 1;  }  75% {   -o-transform: translateY(0);   opacity: 1;  }  100% {   -o-transform: translateY(350px);   opacity: 0;  } } @keyframes fio {  0% {   opacity: 0;  }  20% {   opacity: 1;  }  50% {   opacity: 1;  }  80% {   opacity: 0;  }  100% {   opacity: 0;  } }

<div class="ad_container"> <img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg"> <div class="title title1">  <h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2> </div> <div class="title title2">  <h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2> </div> <div class="title title3">  <h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2> </div> <a class="click_through click_through1" href="/">View here</a> <a class="click_through click_through2" href="/">Learn more</a></div>

Restart animation in CSS3: any better way than removing the element?

Just set the animation property via JavaScript to "none" and then set a timeout that changes the property to "", so it inherits from the CSS again.

Demo for Webkit here: http://jsfiddle.net/leaverou/xK6sa/
However, keep in mind that in real world usage, you should also include -moz- (at least).

How to trigger a CSS animation?

Your attempt 2 works - just cleaned up your code a bit to remove the webkit prefixes (which are a few years outdated). I'm setting the animationName to 'none' inline, and then removing that so the element goes back to using its original CSS animation name.

Also, having multiple from and tos in a keyframe animation won't work, so I formatted it to work with percentages.

var btn = document.getElementById("button");var text = document.getElementById("balance-desktop");
function turngreen() {  text.style.animationName = 'none';  setTimeout(function() {    text.style.animationName = null;  }, 0);}
btn.addEventListener('click', turngreen);

#balance-desktop {  color: black;  animation: gogreen 2s;}
@keyframes gogreen {  0%, 100% { color: black; }  50% { color: limegreen; }}

<h3 id="balance-desktop">Heading</h3>
<button id="button">Turn Green</button>

How to replay a CSS3 animation in Reactjs

ReactJS uses key attribute to distinguish between elements in the diffing algorithm. So, the first time your component loads , react assumes it as new element and renders it accordingly. But next time it tries to render the same element with different data , react feels that it has the same structure and only replaces the new data with old data.

So to apply animations for every change, we need to tell react that this is a new component. This can be done by providing a key to the element with your animation class. And key can be randomly generated using any random number generator( I generally use shortid).

For working example, please refer: this

Trigger CSS Animation on div click

Note that in your code, the elements that have "animation" css rules are the LI elements. So changing the animation property of the UL's style won't work.

Here I changed your CSS a bit so that you can give the UL the class of "animate" and the child LIs will animate. When you press the button it removes that class, and then using a setTimeout re-adds it, it should reset and replay the animation.

document.getElementById("clickable").addEventListener("click", controlAnimation);


function controlAnimation() {
  const menu = document.querySelector('#menu-main-menu');
  menu.classList.remove('animate');
  setTimeout(() => {
    menu.classList.add('animate');
  }, 0);
}

#menu-main-menu li {
  border-bottom: solid 1px #999;
}

#menu-main-menu.animate li {
  opacity: 0;
  -webkit-animation: fadeInMenu 0.5s 1;
  animation: fadeInMenu 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#menu-main-menu.animate li:nth-child(5n+1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#menu-main-menu.animate li:nth-child(5n+2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#menu-main-menu.animate li:nth-child(5n+3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#menu-main-menu.animate li:nth-child(5n+4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#menu-main-menu.animate li:nth-child(5n+5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}



/* Animation steps */

@-webkit-keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }

<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu" class='animate'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>