CSS анимация, как замедлить итерации? - PullRequest
Новая
       74

CSS анимация, как замедлить итерации?

0 голосов
/ 19 февраля 2019

У меня есть следующий класс, содержащий анимацию.То, что я хотел бы сделать, это постепенно замедлять продолжительность каждой итерации.Например, первая итерация должна быть 150 мс, следующая 200 мс, следующая 250 мс и т. Д. Как мне этого добиться? 

.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 голосов
/ 19 февраля 2019

Одна из идей - просто использовать несколько анимаций.Конечно, если вы хотите 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>
0 голосов
/ 19 февраля 2019

Вы можете попробовать 

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

надеюсь, эта помощь

...