title: CSS animation speed control
body: <p><a href="http://codepen.io/Serhiicss/pen/dOqbXp" rel="nofollow noreferrer">Demo on CodePen</a></p>
  
  <pre><code>&lt;pre&gt;
  .parent
    border: 1px solid tomato
    height: 300px
    margin: 0 auto
    margin-top: 30px
    width: 80%
  
  .box
    width: 50px
    height: 50px
    position: absolute
    animation-name: falling
    animation-iteration-count: infinite
  
  
  .box-1
    background-color: lightblue
    right: 60vw
    animation-duration: 6s
    @keyframes falling
      0%
        top: -10vh
      100%
        top: 90vh
  
  .box-2
    background-color: lightgreen
    right: 70vw
    animation-duration: 8s
    @keyframes falling
      0%
        top: -10vh
      100%
        top: 90vh
  &lt;/pre&gt;
  </code></pre>
  
  <p>As you can see in the demo, the animation speed of the cube is slowing down the closer it gets to the bottom.</p>
  
  <p>I'd like to make animation the same speed during the fall.</p>
  
  <p>Thank you.</p>