Свойство animation-play-state
Для CSS-анимации существует еще одно полезное свойство — animation-play-state
. Оно позволяет определять, будет ли анимация воспроизводиться или же она будет стоять на паузе. Для данного свойства предусмотрены два значения:
running
— анимация проигрывается;paused
— анимация стоит на паузе. Если запустить анимацию после постановки на паузу, то она продолжится с того места, на котором была приостановлена.
На примере ниже пауза срабатывает при наведении курсора мыши на блок с прыгающим мячом. Если курсор убрать, то анимация снова запустится — мяч продолжит прыгать:
Далее в учебнике: универсальное свойство animation для записи всех параметров анимации в одной строке.