Tematy: animation | @keyframes | animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state
| Dane w pigułce | |
| Zastosowanie | Uruchamia lub zatrzymuje animację |
| Dziedziczenie | nie |
| Wartości | runnning | paused |
| Wartość domyślna | running |
| Przykład | animation-play-state: paused; |
| Składnia JavaScript | object.style.animationPlayState="paused" |
Aby zdefiniować działanie lub zatrzymanie animacji, należy wpisać w definicji stylu animation-play-state: akcja.
Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-.
Stan akcji możemy podawać w zbiorczej definicji animacji lub też w postaci oddzielnego wiersza kodu.
Typowym zastosowaniem jest zatrzymanie animacji (albo odwrotnie - uruchomienie) po wykonaniu jakiejś akcji, np. przesunięciu kursora nad pojemnik. Po zdefiniowaniu w stylach pojemnika z akcją i podaniu kodu:
animation-play-state: running;
definiujemy dodatkowo stan akcji po przesunięciu kursora nad pojemnik (z użyciem pseudoklasy :hover), np:
div.pojemnik:hover { animation-play-state: paused; }
Po przesunięciu kursora nad pojemnik, animacja zostanie wstrzymana, a po odsunięciu kursora - ponownie uruchomiona w tym samym miejscu:
Interpretacja: Chrome i Safari (z prefiksem).
