CSS animation jumps

Question

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 https://jsfiddle.net/mzd7rqqL/

I think you can see what I try to achieve!

CSS

  .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;
  }

HTML

<div class="overlay rolldown"></div>

thanks for any help!

Answer 1

You said:

...the div should be "fixed" to the top for the first 50% to scale from top to down and then it should be "fixed" at the bottom and scale down...

To solve this, I've added two steps keyframes: rolldown1 and rolldown2. First, it will animate top to down, wait 3 seconds and then animate to collapse and disappear.

---

Solution:

.overlay {
  background: #00b2c0;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@keyframes rolldown1 {
  0%   {
    -webkit-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  
  100% {
    -webkit-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes rolldown2 {
  0%   {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  
  50%   {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);    
  }
  
  100% { 
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

.rolldown {
  /* here, it will wait for 3 seconds before collapsing */

  -webkit-animation: 
    rolldown1 1s linear 0s 1 normal forwards,
    rolldown2 1s linear 3s 1 normal forwards
  ;

  animation: 
    rolldown1 1s linear 0s 1 normal forwards,
    rolldown2 1s linear 3s 1 normal forwards
  ;
}

<div class="overlay rolldown"></div>