Метод использования и пример attribute animation-play-state CSS3

Атрибут animation-play-state CSS3 определяет, играть анимацию или приостанавливать её.

В таблице ниже резюмируются контекст использования и история версий этого атрибута.

Синтаксис использования attribute animation-play-state

Синтаксис этого атрибута следующий:

animation-play-state:　paused　|　running　|　initial　|　inherit

Ниже приведен пример того, как использовать атрибут animation-play-state.

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-play-state:　paused;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-play-state:　paused;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Значения свойств

В таблице ниже описаны значения этого свойства.

Совместимость браузеров

Совместимость браузеров для свойства animation-play-state, все основные браузеры поддерживают это свойство.

Дополнительное чтение

Пожалуйста, обратитесь к следующим учебникам:CSS3 анимации。

Связанные свойства и правила:animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。