Html CSS动画跳跃

抱歉，我不熟悉css动画，所以可能是studpid；）所以我得到了一个叠加div，我想从上到下（固定在顶部）设置动画，然后缩小（固定在底部），但是动画会跳过一些序列。我真的不知道为什么。这是一把小提琴

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

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

---

谢谢你的帮助

您的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;
}

---

也许您应该将高度设置为“向下滚动”的50%，请尝试以下操作：

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

}

}你说过：

…div应“固定”到顶部，在前50%时从上向下缩放，然后在底部“固定”并向下缩放

为了解决这个问题，我添加了两个关键帧：

rolldown1

和

rolldown2

。首先，它将从上到下设置动画，等待3秒钟，然后设置动画以折叠并消失

---

解决方案：

.overlay{
背景：#00b2c0；
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；
身高：100%；
z指数：1；
}
@关键帧向下滚动1{
0%   {
-webkit变换原点：左上；
变换原点：左上；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
}
100% {
-webkit变换原点：左上；
变换原点：左上；
-webkit转换：scaleY（1）；
变换：scaleY（1）；
}
}
@关键帧滚动2{
0%   {
-webkit变换原点：左下角；
变换原点：左下角；
-webkit转换：scaleY（1）；
变换：scaleY（1）；
}
50%   {
-webkit变换原点：左下角；
变换原点：左下角；
-webkit转换：scaleY（0.5）；
变换：scaleY（0.5）；
}
100% { 
-webkit变换原点：左下角；
变换原点：左下角；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
}
}
.滚下{
/*在这里，它将等待3秒后崩溃*/
-webkit动画：
向下滚动1s线性0s 1正常向前，
滚动2 1s线性3 S 1正常向前
;
动画：
向下滚动1s线性0s 1正常向前，
滚动2 1s线性3 S 1正常向前
;
}

试试这个

---

所以，我不能让它与规模，但我可以让它与翻译工作

---

你是说闪烁效应吗？是的，如果你想这样称呼它。div应“固定”到顶部，前50%从顶部向下缩放，然后在底部“固定”并向下缩放。我希望你能理解我但在几秒钟内，它会从顶部/底部“跳跃”。不知道为什么？我看起来也一样？就在SCS的CSS接口中。。。但“跳跃”或“闪烁”效应仍然存在？谢谢你的回答，但效果相同，现在它又“滞后”。谢谢你，但现在它没有固定在50%的底部？不，对不起。但我找到了另一个实现我愿望的方法：@FNGR实际上，我也做了同样的事情。你能再运行一下我的代码片段吗？在您的解决方案中，它可以缩放2倍，这是不好的。检查我的，它可以扩展到1x，这可能是正确的。对不起，我没有看到你的解决方案，因为延迟：D对不起！是的，看起来很棒@谢谢你。我又改进了一次。请在这里核对：

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

.container{
    background:#00b2c0;
    height:1000px;
    -webkit-animation: expand 5s;
}

@-webkit-keyframes expand{
    0%{height:0px}
    100%{height:1000px}
}

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

  @keyframes rolldown {
    0% {transform: translateY(0);}
    50% { transform: translateY(100%);}
    100% { transform: translateY(200%);}
  }

  .rolldown {
    -webkit-animation-name: rolldown;
    animation-name: rolldown;
  }