[SOLVED] CSS animation, how to slow down iterations?

CSS animation, how to slow down iterations?

I have the following class containing an animation. What I would like to do is to slow down the duration of each iteration gradually. For example the first iteration should be 150ms, the next one 200ms, the next one 250ms, etc. How can I achieve this?

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

Solution

One idea is to simply use multiple animation. Of course, if you want 100+ iteration it won't be the best solution unless you consider SASS/LESS to generate the code.

Here is an example. The delay of each one should be the delay + the duration of the previous one

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

To avoid the use of reverse make the animation to have the first and last state to be the same:

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