[postlink]https://iamdaowner.blogspot.com/2012/06/happy-labor-day-in-css3-animation.html[/postlink]
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
<div class='animateme'></div>
CSS Script
<style type="text/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;}
}
</style>
0 comments:
Post a Comment