One example of animation in CSS3 (taken from here):
div { content:url("myImage.png"); -webkit-animation: myfirst 1s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from{ opacity: 0; -webkit-transform: rotate(0deg); } to{ opacity: 1; -webkit-transform: rotate(90deg); } }
Example you can download here.
---
To know if animation has ended you can use this code:
window.onload = function () { document.getElementById("myDiv").addEventListener("webkitAnimationEnd", AnimationListener, false); } function AnimationListener() { alert("Animation has ended") }
Notice webkitAnimationEnd, this will most problably work just in Chrome, for other browser you should some of these events: oanimationend msAnimationEnd animationend
or simply use jQuery like:
window.onload = function () { $("div").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function(e) { alert("Animation has ended"); }) }
---
To restart your animation you can use code like this:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> <link href="/index.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="myCssClas"></div> <button style="top:400px;position:absolute">Restart</button> </body> </html>
JS:
window.onload = function () { $("button").click (function() { var el = $("div"), newone = el.clone(true); el.before(newone); $("." + el.attr("class") + ":last").remove(); }); }
CSS:
div { content:url("myImage.png"); -webkit-animation: myfirst 1s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from{ opacity: 0; -webkit-transform: rotate(0deg); } to{ opacity: 1; -webkit-transform: rotate(90deg); } }
---
To force animation to stay on last position, use:
-webkit-animation-fill-mode: forwards;
---
One more example of animation using pure JS - no jQuery or any other framework.
HTML:
<!DOCTYPE html> <html> <head> <link type="text/javascript" rel="stylesheet" href="/index.css"> <script type="text/javascript" src="/index.js"></script> </head> <body> <div id="animationOne">Animation one</div> <div id="animationTwo" class="withoutAnimationTwo">Animation two</div> <button id="animationTwoStart">Animation two - start</button> </body> </html>
CSS:
#animationOne { position: relative; left: 0px; top: 0px; color: red; -webkit-animation: animationOne 1s; -webkit-animation-fill-mode: forwards; } .withoutAnimationTwo { position: relative; color: green; left: 0px; top: 0px; } .animationTwo { position: relative; color: green; left: 0px; top: 0px; -webkit-animation: animationTwo 1s; } @-webkit-keyframes animationOne { from { left: 0px; } to { left: 1000px; } } @-webkit-keyframes animationTwo { from { left: 0px; } to { left: 1000px; } }
JS:
window.onload=function () { document.getElementById("animationTwoStart").addEventListener("click", function () { document.getElementById("animationTwo").className = 'withoutAnimationTwo'; //this set time out I need to restart the animation setTimeout(function() { document.getElementById("animationTwo").className = "animationTwo"; }, 10); }); }
Example download from here.