Restart CSS3 Animation Using Javascript

Question

I am creating a CSS3 / HTML5 banner ad and want them to loop the animation as soon as they are complete. I know there is a way to check with Javascript to check if any particular animation has ended, however I cannot figure out how to restart the animation from all the starting points then.

Essentially, I have 3 'frames' with different information, each of which will disappear and then disappear in order to be replaced with the next frame - as soon as the last frame disappears, I want the animation to start anew, Performing this exclusively with Using CSS3 is too complicated because the timings of animations and points at which the opacity is set to 0 must be different for each animation.

As you can see from JSFiddle, it plays once and then stops, which is fine, now I just need to restart the animation as soon as click_through2 finishes the animation.

Jsfiddle

  .test { height: 250px; position: relative; width: 300px; overflow: hidden; } .test div, .test 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 7s ease-out 0s both; -moz-animation: tbio 7s ease-out 0s both; -webkit-animation: tbio 7s ease-out 0s both; -ms-animation: tbio 7s ease-out 0s both; -o-animation: tbio 7s ease-out 0s both; } .click_through2 { animation: tbio 7s ease-out 10s both; -moz-tbio tbio 7s ease-out 10s both; -webkit-tbio tbio 7s ease-out 10s both; -ms-tbio tbio 7s ease-out 10s both; -o-tbio tbio 7s ease-out 10s both; width: 80px; } .logo { top: 8px; left: 8px; } .title1 { animation: ltrio 6s ease 0s both; -moz-animation: ltrio 6s ease 0s both; -webkit-animation: ltrio 6s ease 0s both; -ms-animation: ltrio 6s ease 0s both; -o-animation: ltrio 6s ease 0s both; } .title2, .title3 { opacity: 0; } .title2 { animation: ltrio 6s ease 5.5s both; -moz-animation: ltrio 6s ease 5.5s both; -webkit-animation: ltrio 6s ease 5.5s both; -ms-animation: ltrio 6s ease 5.5s both; -o-animation: ltrio 6s ease 5.5s both; } .title3 { animation: ltrio 6s ease 10s both; -moz-nimation: ltrio 6s ease 10s both; -webkit-nimation: ltrio 6s ease 10s both; -ms-onimation: ltrio 6s ease 10s both; -o-nimation: ltrio 6s ease 10s both; } .sfv2 { right: 12px; top: 34px; animation: fio 6s ease 11s both; -moz-animation: fio 6s ease 11s both; -webkit-animation: fio 6s ease 11s both; -ms-animation: fio 6s ease 11s both; -o-animation: fio 6s ease 11s 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="test"> <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> 

Answer 1

You can check the end of the animation by responding to the endanimation event (of which there are several browser- specific options ), reloading the corresponding nodes and repeating the entire process. Note. I applied a factor of 10 to the animation speed 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> 

Answer 2

Use setTimeout and try setting the animation property to something else, and then set it again to the class name to restart the animation.

Sort of:

 setTimeout(function(){ document.querySelector('.someclass').classList.remove("run-animation").classList.add("run-animation"); }, 1000) 

Answer 3

Delete the class to which the animation is assigned, and add it again (possibly with a timeout), and the animation will start again.