Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 08.12.2024

Наверх

Наверх

Свойство animation-play-state

Для CSS-анимации существует еще одно полезное свойство — animation-play-state. Оно позволяет определять, будет ли анимация воспроизводиться или же она будет стоять на паузе. Для данного свойства предусмотрены два значения:

  • running — анимация проигрывается;
  • paused — анимация стоит на паузе. Если запустить анимацию после постановки на паузу, то она продолжится с того места, на котором была приостановлена.

На примере ниже пауза срабатывает при наведении курсора мыши на блок с прыгающим мячом. Если курсор убрать, то анимация снова запустится — мяч продолжит прыгать:

Далее в учебнике: универсальное свойство animation для записи всех параметров анимации в одной строке.