Vlastnosť animation-play-state

Vlastnosť animation-play-state umožňuje nastaviť stav animácie: buď sa prehráva alebo je pozastavená.

Syntax

selektor {
	animation-play-state: paused | running;
}

Hodnoty

Hodnota	Popis
`paused`	Animácia je pozastavená.
`running`	Animácia sa prehráva.

Predvolená hodnota: running.

Príklad

V tomto príklade sa animácia spustí pri prejdení myšou nad prvok a zastaví sa, keď myš opustí prvok:

<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;
}

Príklad . Prejdenie nad iným prvkom

Teraz sa animácia spustí prejdením myši nad iný prvok a pri odobratí myši z neho sa zastaví:

<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;
}

Pozrite tiež

vlastnosť animation-name,
ktorá nastavuje názov animácie
vlastnosť animation-duration,
ktorá nastavuje trvanie animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-iteration-count,
ktorá nastavuje počet opakovaní animácie
vlastnosť animation-direction,
ktorá nastavuje smer animácie
vlastnosť animation-fill-mode,
ktorá nastavuje stav animácie
vlastnosť animation,
ktorá je skráteným zápisom pre animácie
príkaz @keyframes,
ktorý definuje kľúčové fázy animácie
plynulé prechody transition, ktoré predstavujú animáciu pri prejdení myšou nad prvok