Happy Labor Day in CSS3 Animation

Happy Labor Day Guys!

A basic CSS3 animated greetings for everyone. Just refresh the page to view the animation again.

*Please take note that this works on latest Firefox, Chrome and Safari ONLY

HTML Script

{code type=’html’}<div class=’animateme’></div>{/code}

CSS Script

{code type=’css’}
div.animateme{
width:120px;
height:160px;
background:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet0.jpg) no-repeat center top;
position:relative;
animation:greetem 5s;
-moz-animation:greetem 5s; /* Firefox */
-webkit-animation:greetem 5s; /* Safari and Chrome */
}
@keyframes greetem{
0% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet0.jpg); left:0px;}
25% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet1.jpg); left:125px;}
50% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet2.jpg); left:250px;}
75% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet3.jpg); left:375px;}
100% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet4.jpg); left:500px;}
}
@-moz-keyframes greetem /* Firefox */{
0% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet0.jpg); left:0px;}
25% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet1.jpg); left:125px;}
50% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet2.jpg); left:250px;}
75% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet3.jpg); left:375px;}
100% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet4.jpg); left:500px;}
}
@-webkit-keyframes greetem /* Safari and Chrome */{
0% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet0.jpg); left:0px;}
25% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet1.jpg); left:125px;}
50% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet2.jpg); left:250px;}
75% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet3.jpg); left:375px;}
100% {background-image:url(http://cdn.codingcereal.com/wp-content/uploads/2012/05/greet4.jpg); left:500px;}
}
{/code}

Reference reading: CSS3 Animations

Enjoy!

Happy coding :)

Recommended Posts
  • http://www.facebook.com/romeojohnpasion Romeo John

    Nice