Webkit Animation using Steps

by HYEONGJINKIM

HTML

<div class="background">
  <div id="foxtail"></div>
</div>

CSS

.background {
  height: 373px;
  width: 244px;
  background: url(http://mozorg.cdn.mozilla.net/media/img/firefox/partners/screen-overview.jpg) 0 0 no-repeat;
  position: relative;
}

@-webkit-keyframes animate-tail {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}

#foxtail {
  -webkit-animation: animate-tail 3.75s steps(44) infinite;
  background: url(http://davidwalsh.name/demo/foxtail.png) 0 0 no-repeat;
  width: 156px;
  height: 156px;
  top: 90px;
  left: 30px;
  position: absolute;
}