CSS动画跳转

Question

对不起，我对css动画很陌生，所以它可能是学习的;)所以我有一个覆盖div，我想从上到下(固定在顶部)，然后缩小(固定在底部)，但动画跳过了一些序列。我真的不知道为什么。这是一把小提琴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应该是“固定”到顶部，在第一个50%的比例从上到下，然后它应该“固定”在底部和规模下降。

为了解决这个问题，我添加了两步关键帧：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>

​

Answer 2

您的CSS有错误，请尝试以下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;
}

Answer 3

也许您应该将高度设置为“滚下”的50%，尝试如下：

  .overlay {
background: #00b2c0;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: infinite 2s;
animation: infinite 2s;

}

@keyframes rolldown {
0% {transform: scaleY(0); transform-origin: left top;}
50% { transform: scaleY(1); height: 10%; }
100% {transform: scaleY(0); transform-origin: left bottom; }

}