title: CSS3 consistent animation speed
body: <p>I want my leaf animate towards certain directions while slowing down its speed. I tried using ease-out to implement this effect. However, this causes my leaf to ease-out when going one direction (from 0% to 75%) and once again when going another direction (at 75% to 100%).</p>
  
  <p>How do I make my leaf go directions and constantly slow down (not ease-out at every turn)?</p>
  
  <pre><code>#leaf {         
      height:100px;
      width:100px;
  
      animation: leaf 10s infinite ease-out;                                          
      -webkit-animation: leaf 10s infinite ease-out;                                  
  }                                                                                   
  
  @keyframes leaf {                                                                   
      0% {                                                                        
              transform: translate(0, 0px) rotateZ(0deg);                         
      }                                                                           
      75% {                                                                       
              transform: translate(200px, 300px) rotateZ(270deg);                 
      }                                                                           
      100% {                                                                      
              transform: translate(0px, 600px) rotateZ(360deg);                   
      }                                                                           
  }                                                                                   
  
  @-webkit-keyframes leaf {                                                           
      0% {                                                                        
              -webkit-transform: translate(0, 0px) rotateZ(0deg);                 
      }                                                                           
      75% {                                                                       
              -webkit-transform: translate(200px, 300px) rotateZ(270deg);         
      }                                                                           
      100% {                                                                      
              -webkit-transform: translate(0px, 600px) rotateZ(360deg);           
      }                                                                           
  }                           
  </code></pre>