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

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -