<h1>Demo 1: Basic CSS Sprite Animation</h1>
<p>A looping sprite animation created with the CSS3 keyframe syntax using the steps() function. Not responsive — try changing Ryu's height.</p>
<div class="ryu"></div>
<p class="p">Demo by Tom Bennet. <a href="http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock" target="_blank">See article</a>.</p>
body {
padding: 20px;
text-align: center;
}
.ryu {
width: 435px;
height: 267px;
margin: -5% auto 0 auto; /* positioning tweak */
background: url('http://bennet.org/images/codepen/ryu-sprite-demo.png') no-repeat 0 0%;
animation: sprite 3.5s steps(45) infinite;
}
@keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
h1 {
font-size: 1.2em;
}
.p {
margin-top: 120px;
font-size: 14px;
}
// See: http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.