html.okpython.net
HTML и CSS для начинающих

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

css-свойство animation-play-state (от англ. animation play stateсостояние проигрывания анимации) используется для снятия либо постановки анимации на паузу. Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.

Характеристики

  • Значение по умолчанию: running.
  • Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.animationPlayState="value".

Синтаксис

animation-play-state: running | paused

Значения

  • running – анимация проигрывается.
  • paused – анимация поставлена на паузу.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 3em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		}
				
		/* Задаем свойства анимации */ 
		#anim{
		animation-name: example_1, example_2;
		animation-duration: 3s;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		animation-play-state: paused;
		}
				
		@keyframes example_1{
			0% {
			background: #ff0000;
			height: 50px;
			}
			
			50% {
			background: #00ff00;
			height: 400px;
			}
			
			100% {
			background: #0000ff;
			height: 200px;
			}
		}
		
		@keyframes example_2{
			from {
			width: 150px;
			}
			
			to {
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

<div id="anim" onclick="playAnim()"></div>

<script>
		
function playAnim(){
	//Находим наш анимируемый блок
	var animElem=document.getElementById('anim');
	//Если анимация запущена
	if(getComputedStyle(animElem).getPropertyValue('animation-play-state')=='running'){
		//то ставим ее на паузу
		animElem.style.animationPlayState='paused';
	//иначе
	}else{
		//запускаем анимацию
		animElem.style.animationPlayState='running';
	}
}
	
</script>
	
</body>	
</html>		

Пример №1