Właściwość CSSAnimacje
animation-play-state
Wstrzymuje lub wznawia animację.
- Wartość domyślna
running- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationPlayState = "paused"
Przykład
#CSS
.marquee {
animation: scroll 12s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}HTML przykładu
<style>
@keyframes scroll-x { to { transform: translateX(-50%); } }
.mq { display: flex; gap: 24px; width: max-content; animation: scroll-x 12s linear infinite; }
.mq:hover { animation-play-state: paused; }
</style>
<div style="overflow: hidden;"><div class="mq"><span>HTML</span><span>CSS</span><span>JavaScript</span><span>TypeScript</span><span>Python</span><span>HTML</span><span>CSS</span><span>JavaScript</span><span>TypeScript</span><span>Python</span></div></div>Podgląd
Definicja i zastosowanie
#Właściwość animation-play-state przyjmuje dwie wartości: running (animacja trwa) i paused (animacja stoi w miejscu). Po wznowieniu animacja kontynuuje od miejsca, w którym została zatrzymana, a nie od początku.
Popularny wzór to zatrzymywanie animacji po najechaniu kursorem, na przykład przewijającego się paska z logotypami, żeby dało się przeczytać treść.
Stan można przełączać także w JavaScripcie, na przykład wstrzymując animacje, gdy element nie jest widoczny na ekranie.
Składnia
#Składnia
animation-play-state: running | paused [, …]*;Wartości
#Wartości w praktyce
#running
Zębatka się obraca.
.demo { animation-play-state: running; }paused
Zębatka stoi w miejscu, w którym się zatrzymała.
.demo { animation-play-state: paused; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pasek z przewijającymi się elementami zatrzymuj po najechaniu kursorem i przy fokusie klawiatury.
- Wstrzymywanie animacji poza ekranem oszczędza baterię na telefonach.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.