CSS动画,如何减慢迭代速度?

时间:2019-02-19 13:49:00

标签: css iteration css-animations slowdown

我有以下包含动画的类。我想做的是逐渐降低每次迭代的持续时间。例如,第一次迭代应该为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) }
}

2 个答案:

答案 0 :(得分:1)

您可以尝试

import numpy as np

list = np.array(['hey', 'what', 0, False, None, 14])
print(sum(list != None))

希望获得帮助

答案 1 :(得分:1)

一个想法是简单地使用多个动画。当然,如果您想进行100次以上的迭代,那么除非您考虑使用SASS / LESS来生成代码,否则它不是最佳的解决方案。

这里是一个例子。每一个的延迟应该是前一个的延迟 + 持续时间

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