Question

Demo on CodePen

<pre>
.parent
  border: 1px solid tomato
  height: 300px
  margin: 0 auto
  margin-top: 30px
  width: 80%

.box
  width: 50px
  height: 50px
  position: absolute
  animation-name: falling
  animation-iteration-count: infinite


.box-1
  background-color: lightblue
  right: 60vw
  animation-duration: 6s
  @keyframes falling
    0%
      top: -10vh
    100%
      top: 90vh

.box-2
  background-color: lightgreen
  right: 70vw
  animation-duration: 8s
  @keyframes falling
    0%
      top: -10vh
    100%
      top: 90vh
</pre>

正如你在演示中看到的那样，立方体的动画速度越慢越靠近底部。

我希望在秋季期间以相同的速度制作动画。

谢谢。

Answer 1

CSS中的默认animation-timing-function为ease - 在开始时加速，在中间后缓慢。你需要一个linear计时功能，它具有恒定的速度。

将方框计时功能更改为线性（pen）：

.box
  width: 50px
  height: 50px
  position: absolute
  animation-name: falling
  animation-iteration-count: infinite
  animation-timing-function: linear

Answer 2

您可以使用动画功能linear。请看下面的代码段：

.parent {
  border: 1px solid tomato;
  height: 300px;
  margin: 0 auto;
  margin-top: 30px;
  width: 80%;
}

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  animation-name: falling;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.box-1 {
  background-color: lightblue;
  right: 60vw;
  animation-duration: 6s;
}
@keyframes falling {
  0% {
    top: -10vh;
  }
  100% {
    top: 90vh;
  }
}
.box-2 {
  background-color: lightgreen;
  right: 70vw;
  animation-duration: 8s;
}
@keyframes falling {
  0% {
    top: -10vh;
  }
  100% {
    top: 90vh;
  }
}

<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>

希望这有帮助！

CSS动画速度控制

2 个答案: