Kurs HTML

Do czego służy animation-play-state?

Właściwość animation-play-state pozwala na **wstrzymanie (pauzę) i wznowienie** aktualnie trwającej animacji CSS bez resetowania jej postępu.

Jest to bardzo przydatne do tworzenia interaktywnych animacji, które mogą być kontrolowane przez użytkownika (np. zatrzymanie animacji po najechaniu myszką) lub przez skrypty JavaScript.

Składnia i wartości

Właściwość animation-play-state przyjmuje jedną lub więcej wartości, oddzielonych przecinkami, odpowiadających kolejnym animacjom zdefiniowanym w animation-name.

animation-play-state: running | paused [, ...];Kopiuj

• running (wartość domyślna): Animacja jest odtwarzana normalnie.
• paused: Animacja jest wstrzymana w bieżącej klatce.

Wartość domyślna: running.

Przykład: Wstrzymanie animacji po najechaniu myszką

@keyframes obrot {
  to { transform: rotate(360deg); }
}

.logo {
  width: 100px;
  height: 100px;
  background: lightblue;
  animation-name: obrot;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Domyślnie animacja działa */
  animation-play-state: running; 
}

/* Po najechaniu myszką, wstrzymaj animację */
.logo:hover {
  animation-play-state: paused;
}
Kopiuj

W tym przykładzie logo będzie się obracać w nieskończoność, ale zatrzyma się, gdy użytkownik najedzie na nie kursorem myszy. Po zdjęciu kursora animacja zostanie wznowiona od miejsca, w którym została wstrzymana.

Jeśli lista stanów odtwarzania jest krótsza niż lista nazw animacji, wartości są powtarzane.

Jak działa wstrzymywanie i wznawianie?

Gdy animacja jest wstrzymana (paused), zapamiętuje swój aktualny postęp. Po zmianie stanu z powrotem na running, animacja kontynuuje od tego zapamiętanego punktu, uwzględniając pozostały czas trwania cyklu i inne parametry (jak animation-timing-function).

Wstrzymanie animacji nie resetuje jej licznika powtórzeń ani nie wpływa na opóźnienie (animation-delay), jeśli animacja jeszcze się nie rozpoczęła.

Zastosowania animation-play-state

• Interaktywne animacje: Wstrzymywanie animacji przy interakcji użytkownika (:hover, :focus, kliknięcie obsługiwane przez JS).
• Kontrola przez JavaScript: Skrypty mogą dynamicznie zmieniać animation-play-state, aby wstrzymywać i wznawiać animacje w odpowiedzi na różne zdarzenia (np. przewijanie strony, zakończenie innej operacji).
• Debugowanie: Możliwość wstrzymania animacji w narzędziach deweloperskich (często przez zmianę tej właściwości) jest nieoceniona przy analizowaniu złożonych sekwencji.
• Tworzenie efektów "stop-motion" (chociaż steps() jest często lepsze do tego celu).