CSS3 Sprite Image Animation Technique by Muthujoo
by muthu[ Edit ] 2014-02-19 11:17:14
CSS3 Sprite Image Animation Technique
---------------------------------------------DEMO----------------------------------------------------
---------------------------------------------CSS3----------------------------------------------------
body { text-align:center; background:#f5fe02; font:12px Arial, Helvetica, sans-serif; }
@-webkit-keyframes wink { from { background-position:0px; } to { background-position:-2700px; } }
@-moz-keyframes wink { from { background-position:0px; } to { background-position:-2700px; } }
@keyframes wink { from { background-position:0px; } to { background-position:-2700px; } }
.hi { width:200px; height:414px; background-image:url(gangnam.jpg); margin:0 auto; -webkit-animation:wink 2.22s steps(13, end) infinite;
-moz-animation:wink 2.22s steps(13, end) infinite; animation:wink 2.22s steps(13, end) infinite; }
.fly { -webkit-animation:walking 8s linear infinite; -moz-animation:walking 8s linear infinite; -o-animation:walking 8s linear infinite; transition:transform 8s; }
---------------------------------------------HTML5----------------------------------------------------
<H1>CSS3 Sprite Image Animation Technique <br><font color="#FF0000">by Muthujoo</font></H1>
<div class="fly"><div class="hi"></div></div>
---------------------------------------------IMAGE----------------------------------------------------
