CSS动画，如何减速迭代

Question

i有以下类包含动画的类。我想做的是逐渐减慢每次迭代的持续时间。例如，第一次迭代应为150ms，下一个200ms，下一个250ms等。如何实现？

.shoot-bullet {
    animation: shoot-bullet;
    animation-duration: 150ms;
    animation-iteration-count: 8;
}
@keyframes shoot-bullet {
    0% { transform: scale(1.8, 0.8) }
    100% { transform: scale (1, 1) }
}

Answer 1

一个想法就是简单地使用多个动画。当然，如果您想要100多个迭代，除非您考虑SASS/更少生成代码。

这是一个示例。每个延迟应为延迟持续时间

.box {
  width: 50px;
  height: 50px;
  margin:50px;
  background: red;
  animation: 
    shoot-bullet 100ms  linear 0,
    shoot-bullet 400ms  linear 100ms reverse,
    shoot-bullet 800ms  linear 500ms,
    shoot-bullet 1200ms linear 1300ms reverse,
    shoot-bullet 1600ms linear 2500ms,
    shoot-bullet 2000ms linear 4100ms reverse,
    shoot-bullet 2400ms linear 6100ms;
}
@keyframes shoot-bullet {
  0% {
    transform: scale(1.8, 0.8)
  }
  100% {
    transform: scale(1, 1)
  }
}

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

避免使用反向使动画具有第一个和最后一个状态相同：

.box {
  width: 50px;
  height: 50px;
  margin:50px;
  background: red;
  animation: 
    shoot-bullet 100ms  linear 0,
    shoot-bullet 400ms  linear 100ms,
    shoot-bullet 800ms  linear 500ms,
    shoot-bullet 1200ms linear 1300ms,
    shoot-bullet 1600ms linear 2500ms,
    shoot-bullet 2000ms linear 4100ms,
    shoot-bullet 2400ms linear 6100ms;
}
@keyframes shoot-bullet {
  0%,100% {
    transform: scale(1, 1)
  }
  50% {
    transform: scale(1.8, 0.8)
  }
}

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

Answer 2

您可以尝试

animation: shoot-bullet 150ms linear 0, shoot-bullet 200ms linear 150ms, shoot-bullet 250ms linear 350ms, ...;

希望此帮助