animation-play-state - Český CSS 3 manuál

HTML a CSS Manuál Ostatní vlastnosti 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

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.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!