Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - animacje

CSS3 - animation-play-state

Email Drukuj PDF

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).

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V