FNGR FNGR - 3 months ago 21
CSS Question

CSS animation jumps

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

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>