title: Animate position step by step
body: <p>I'm trying to animate a div position on its left property. This position has to move step by step during all duration.</p>
  
  <p>Here's my sample code :</p>
  
  <pre><code>#my-div {
    position: relative;
    top: -1291px;
    left: 615px;
    animation: my-div-anim 20s infinite;
    animation-timing-function: step-start;
  }
  
  @keyframes my-div-anim {
    0% {left: 615px;}
    20% {left: 800px;}
    40% {left: 985px;}
    60% {left: 1170px;}
    100% {left: 1170px;}
  }
  </code></pre>
  
  <p>But it doesn't work. What could be wrong ? </p>