title: How to make CSS animation jump rather than slide
body: <p>I have the following animation... <a href="http://jsfiddle.net/5vwjy/1/" rel="nofollow">http://jsfiddle.net/5vwjy/1/</a></p>
  
  <p><strong>EDIT: Updated fiddle for all browsers... <a href="http://jsfiddle.net/5vwjy/2/" rel="nofollow">http://jsfiddle.net/5vwjy/2/</a></strong></p>
  
  <p>Using the following CSS...</p>
  
  <pre><code>.box {
    display:block;
    width:240px;
    height:100px;
   background: red url("http://southwestphotobooths.co.uk/sites/all/themes/SWPB/images/check_availability.png") no-repeat;
    text-indent:-9999px;
    position:absolute;
    -webkit-animation-name: change;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: steps(21);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
  }
  
  @-webkit-keyframes change {
  
    0%    {top:0px;left:0px;background-position: 0px 0px;}
    5%    {top:0px;left:0px;background-position: -240px 0px;}
    10%   {top:0px;left:0px;background-position: -480px 0px;}
    15%   {top:0px;left:0px;background-position: -720px 0px;}
    20%   {top:0px;left:0px;background-position: -960px 0px;}
    25%   {top:0px;left:0px;background-position: -1200px 0px;}
    30%   {top:0px;left:0px;background-position: -1440px 0px;}
    35%   {top:0px;left:0px;background-position: -1680px 0px;}
    40%   {top:0px;left:0px;background-position: -1920px 0px;}
    45%   {top:0px;left:0px;background-position: -2160px 0px;}
    50%   {top:0px;left:0px;background-position: -2400px 0px;}
    55%   {top:0px;left:0px;background-position: -2640px 0px;}
    60%   {top:0px;left:0px;background-position: -2880px 0px;}
    65%   {top:0px;left:0px;background-position: -3120px 0px;}
    70%   {top:0px;left:0px;background-position: -3360px 0px;}
    75%   {top:0px;left:0px;background-position: -3600px 0px;}
    80%   {top:0px;left:0px;background-position: -3840px 0px;}
    85%   {top:0px;left:0px;background-position: -4080px 0px;}
    90%   {top:0px;left:0px;background-position: -4080px 0px;}
    95%   {top:0px;left:0px;background-position: -4080px 0px;}
    100%  {top:0px;left:0px;background-position: -4080px 0px;}
  
  }
  </code></pre>
  
  <p>It works over 21 steps, using a really wide png to act as frames based on background position.</p>
  
  <p>I can only get the animation to tween, rather than jump in stages.</p>
  
  <p>How do I make it jump from frame to frame, rather than slide?</p>