IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Vlastnost animation-play-state v CSS 3 - Ostatní CSS vlastnosti

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:

  1. animation-name - Jméno animace
  2. animation-duration - Délka animace
  3. animation-timing-function - Způsob (a rychlost) animace
  4. animation-delay - Doba před spuštěním animace
  5. animation-direction - Směr (a rychlost) animace
  6. 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.


 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity