<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 &mdash; 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