title: CSS animation jumps
body: <p>Sorry, I'm new to css animations so maybe it's studpid ;) So I got a overlay div I want to animate from top to bottom (fixed at top) and then scale down (fixed at the bottom) but the animations jumps some sequences. I really don't know why. here is a fiddle <a href="https://jsfiddle.net/mzd7rqqL/" rel="nofollow">https://jsfiddle.net/mzd7rqqL/</a></p>
  
  <p>I think you can see what I try to achieve!</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  .overlay {
      background: #00b2c0;
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-animation: infinite 2s;
      animation: infinite 2s;
  
      .off {
        width: 0;
        height: 0;
        animation: none !important;
        -webkit-animation: none !important;
      }
    }
  
    @keyframes rolldown {
      0% {transform: scaleY(0); transform-origin: left top;}
      50% { transform: scaleY(1); }
      100% {transform: scaleY(0); transform-origin: left bottom;}
    }
  
    .rolldown {
      -webkit-animation-name: rolldown;
      animation-name: rolldown;
    }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="overlay rolldown"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>thanks for any help!</p>