animation-play-state - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-play-state nastavujeme zda je animace zastavená nebo má běžet.
Hodnoty
- running (výchozí) - Animace normálně běží podle nastavených hodnot.
- paused - Animace se zastaví. Pokud bude dál pokračovat, bude pokračovat z bodu, kdy byla zastavena.
Ukázka
Vytvořme si červený obdélník o velikosti 200px × 150px, který bude nepřetržitě jezdit dolů a zpět nahoru. Po najetí myší na obdélník se zastaví a přebarví na modrou barvu. Po sjetí pryč myší z obdélníku se přebarví zpátky na červenou barvu a bude pokračovat v animaci.
<!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 150px; background-color: red; position: absolute; animation: animace 5s ease; animation-iteration-count: infinite; } div:hover { animation-play-state: paused; background-color: blue; } @keyframes animace { 0%, 100% { top: 0px; left: 0px; } 50% { top: 300px; left: 0px; } } </style> <title>animation-play-state</title> </head> <body> <div></div> </body> </html>
Výsledek:
Všimněte si, že nastavujeme pouze zastavení animace, pokud najedeme myší na obdélník. Žádné nastavení zpět do běhu nikde není. Je to tím, že výchozí hodnota je running, takže pokud je změněna jen za nějakých podmínek a ty poté neplatí, nastaví se výchozí hodnota.
Pokud bychom chtěli nějak zkrátit zápis, museli bychom nejdříve definovat všechny hodnoty, které nastavují animaci. Tyto atributy jsou:
- animation-name - Jméno animace
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
- animation-delay - Doba před spuštěním animace
- animation-direction - Směr (a rychlost) animace
- animation-fill-mode - Nastavení chování elementu, když animace neprobíhá
U minulého příkladu bychom tedy celou animaci (nastavení div) deklarovali takto:
animation: animace 5s ease 0s normal none running;
Výsledek by byl úplně stejný, protože div:hover je až po normálním div a má tedy přednost. Nehraje tedy roli nastavování výchozích hodnot.
