CSS动画速度控制

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

默认animation-timing-function在 CSS 中是 ease - 起步加速，中途减速。你需要一个 linear定时功能，速度恒定。

将框计时功能更改为线性(pen):

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