title: Step animation not working with velocity progress
body: <p>When I know the power of velocity. I wan't convert all my CSS3 animation on my apps using velocity. And now I have problem with step animation. </p>
  
  <p><strong>This is the snippet</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$el = $(".velocity-animation");
  
  $el.velocity({
   paddingLeft : "0"
  }, {
    duration: 3000,
      easing : "ease",
     progress: function(elements, complete) {
       var step = complete * 100 ;
       if(step &lt;= 50 ){
          $el.velocity({
             paddingLeft : "50px"
            })
        } else if(step &lt;= 70 ){
         $el.velocity({
             paddingLeft : "0px"
           })
        } else if(step &lt;= 100 ){
         $el.velocity({
             paddingLeft : "300px"
           })
        }
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.css-animation, .velocity-animation {
    background : red;
  }
  
  .css-animation {
    animation : 3s move;
  }
  
  @keyframes move {
    0% {
      padding-left:0;
    }
    50% {
      padding-left:50px;
    }
    70% {
      padding-left:0;
    }
    100% {
      padding-left:300px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="css-animation"&gt;
    Animate it
  &lt;/div&gt;
  
  &lt;div class="velocity-animation"&gt;
    Animate It
  &lt;/div&gt;
  
  
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's the fiddle <a href="https://jsfiddle.net/nLx3z32z/" rel="nofollow noreferrer">https://jsfiddle.net/nLx3z32z/</a></p>