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

Својство animation-play-state омогућава да се постави стање анимације: да ли се репродукује или је на паузи.

Синтакса

селектор {
	animation-play-state: paused | running;
}

Вредности

Вредност	Опис
`paused`	Анимација је на паузи.
`running`	Анимација се репродукује.

Подразумевана вредност: running.

Пример

У овом примеру анимација ће се покретати када се мишем пређе преко елемента, а заустављати, када се миш склони са елемента:

<div id="elem"></div>

@keyframes move {
	from {
		width: 200px;
	}
	to {
		width: 400px;
	}
}

#elem {
	animation-play-state: paused;
	animation-duration: 1s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	height: 50px;
}
#elem:hover {
	animation-play-state: running;
}

Пример . Прелажење преко другог елемента

А сада ће се анимација покретати када се мишем пређе преко другог елемента, а када се миш склони са њега - заустављати:

<div id="target"></div>
<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#target {
	border: 1px solid red;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
}

#elem {
	animation-play-state: paused;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

#target:hover + #elem {
	animation-play-state: running;
	border: 1px solid green;
}

Погледајте такође

својство animation-name,
које поставља име анимације
својство animation-duration,
које поставља трајање анимације
својство animation-delay,
које поставља одлагање пре извођења анимације
својство animation-timing-function,
које поставља брзину извођења анимације
својство animation-iteration-count,
које поставља број понављања анимације
својство animation-direction,
које поставља правац анимације
својство animation-fill-mode,
које поставља стање анимације
својство animation,
које представља скраћеницу за анимације
команду @keyframes,
која поставља кључне кадрове анимације
глатке прелазе transition, који представљају анимацију приликом прелажења преко елемента