image - How do I animate a set of PNG's in HTML? -
I have this picture: and I have to convert it to HTML, how would I have to do this?
You can revive the image using CSS3
HTML
& lt; Div id = "robot" & gt; & Lt; / Div & gt; & Lt ;! - Image container - & gt;
CSS
#robot {width: 150px; Height: 150px; Background-image: url ("http://plug.dj/_/static/images/avatars/themes/default/space05.1e8c0ce.png"); Background-position: 0; Repeat Background: No Repetition; Animation-name: move; Animation Duration: 1s; Animation-timing function: step-by-step; / * Changes the background-position at the beginning of time / animation-walking-count: infinity; } @Keframe running {0% {background-position: 0;;} 10% {background-position: -150px 0;} 20% {background-position: -300px 0;} 30% {background-position: -450px 0 ;} 40% {background-position: -600px;} 50% {background-position: -750px;} 60% {background-position: -900px;} 70% {background-position: -1050 Px 0;} 80% {background-position: -1200px 0;} 90% {background-position: -1350px 0;} 100% {background-position: -1500px 0;}}
< / Div>
Comments
Post a Comment