JavaScript Event Listener with CSS3 Webkit Animations

CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript. function cssAnimationEnd() { //looks for the ID box from the css and fires the event listen when the animation is complete. box.addEventListener( ‘webkitAnimationEnd’, function( event ){ alert( “Finished animation!” ); }, false ); } Working with event listers like […]

CSS3 Webkit Fade Effect With KeyFrame

Here is an example of a basic fade animation using a CSS3 fade using “-webkit-transition: opacity” property. Please note you need to use a webkit browser to view the animation working. View the example Here. Here is the code used to create the animation: #box { width:500px; height:500px; background:#fff; padding:0; margin:0 auto; /*begin animation properties*/ […]