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

<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>

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Happy Labor Day in CSS3 Animation ini dipublish oleh Unknown pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Happy Labor Day in CSS3 Animation