html - CSS 动画跳跃

Question

抱歉，我是 css 动画的新手，所以它可能很愚蠢 ;) 所以我得到了一个覆盖 div，我想从上到下设置动画(固定在顶部)然后缩小(固定在底部)但是动画跳过一些序列。我真的不知道为什么。这是一把 fiddle https://jsfiddle.net/mzd7rqqL/

我想你可以看到我努力实现的目标!

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>

感谢您的帮助!

Answer 1

你说:

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

为了解决这个问题，我添加了两个步骤关键帧:rolldown1 和rolldown2。首先，它会从上到下动画，等待 3 秒，然后动画折叠并消失。

---

解决方案:

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