如何不间断地从下到上为 div 设置动画？ [复制]答案

【问题标题】：How to animate the div from bottom to top without stop? [duplicate]如何不间断地从下到上为 div 设置动画？ [复制]
【发布时间】：2021-05-08 08:14:36
【问题描述】：

我想让这个 div 随时不停地动画，我怎样才能让它从下到上不停地动画呢？

div {
  width: 10px;
  height: 100px;
  background: red;
  position: relative;
  animation: animateDiv 5s 2;
  animation-direction: alternate;
}

@keyframes animateDiv {
  0%   {bottom: 0px; top: 10px;}
  25%  {bottom: 200px; top:30px;}
}

【问题讨论】：

标签： html css

【解决方案1】：

使用“无限”而不是“2”。这将使动画永远重复！

【讨论】：

【解决方案2】：

您可以在 css 中使用animation infinite

div {
  width: 10px;
  height: 100px;
  background: red;
  position: relative;
  animation: animateDiv 5s 2;
  animation-direction: alternate;
  animation-iteration-count: infinite; //You must add this to make it infinite
}

你也可以制作这个keyframe to 100% 来观看流畅的动画 :D

@keyframes animateDiv {
  0%   {bottom: 0px; top: 50px;}
  100%  {bottom: 50px; top:0px;
}

【讨论】：

【解决方案3】：

您可以将infinite 用于您的动画。下面是一个例子：

.container {
  position: relative;
  background-color: #eee;
  height: 100px;
  width: 500px;
}

#box {
  position: absolute;
  top: 0;
  left: calc(50% - 5px);
  animation: move 2s infinite;
  background-color: red;
  height: 10px;
  transform: translateY(0);
  width: 10px;
}

@keyframes move {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(90px)}
}

<div class="container">
  <div id="box"></div>
</div>

【讨论】：