#HTML explosion using #CSS Key Frames simply explained. #javascript

Oscar Brito


HTML explosion using CSS Key Frames simply explained.

Click on the following link to see a live example of it:
http://www.html5rocks.com/static/demos/racer/carexplosion.html

The basic functionality it's on CSS key frames usage to manipulate the backgroud image of the HTML Element.

The sprite which contains the background images is:
http://www.html5rocks.com/static/demos/racer/img/car-crash.png

The CSS rule to create the explosions is the following:




.play-crash {

/* describe which keyframes are part of the animation /
-webkit-animation-name:car-crash-row1, car-crash-row2, car-crash-row3, car-crash-row4, car-crash-row5;

/
total animation duration /
-webkit-animation-duration:0.2s;

/
starts animation of each keyframe on /
-webkit-animation-delay:0s, 0.2s, 0.4s, 0.6s, 0.8s;

/
how animation transition between keyframes /
-webkit-animation-timing-function: steps(5), steps(5), steps(5), steps(5), steps(5);

/
how should animation apply styles */
-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes car-crash-row1 {
0% { background-position: 0px 0px; }
100% { background-position: -1500px 0px; }
}

@-webkit-keyframes car-crash-row2 {
0% { background-position: 0px -250px; }
100% { background-position: -1500px -250px; }
}

@-webkit-keyframes car-crash-row3 {
0% { background-position: 0px -500px; }
100% { background-position: -1500px -500px; }
}

@-webkit-keyframes car-crash-row4 {
0% { background-position: 0px -750px; }
100% { background-position: -1500px -750px; }
}

@-webkit-keyframes car-crash-row5 {
0% { background-position: 0px -1000px; }
100% { background-position: -1500px -1000px; }
}


Take a look at the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

@aetheon - Oscar Brito



Visit www.divhide.com for more informations, contacts and news about Web Development.
See other blog posts at blog.divhide.com.



Divhide purpose is to follow the HTML5 movement and contribute with applications which prove the quality of technology.


Feel free to contact divhide.