animation-direction - Český CSS 3 manuál

HTML a CSS Manuál Ostatní vlastnosti animation-direction - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation-direction nastavujeme, jakým směrem (a rychlostí) se animace přehraje.

Hodnoty

  • normal (výchozí) - Animace se hraje normálně podle předešlých nastavení.
  • reverse - Animace se přehrává obráceně (tj. pokud má jet dokola směrem doprava, pojede dokola směrem doleva).
  • alternate - Animace se přehraje v jednom směru každou lichou dobu (1, 3, 5, ...) a opačně každou sudou dobu (2, 4, 6, ...).
  • alternate-reverse - Podobný předešlé hodnotě. Animace se přehraje obráceně každou lichou dobu (1, 3, 5, ...) a normálně každou sudou dobu (2, 4, 6, ...).

Ukázka

Vytvoříme si div o velikosti 100px × 100px, který bude představovat zelený kruh. Ten bude jezdit dokola, následně se vracet a bude se postupně zvětšovat. Použijeme hodnotu alternate.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        background-color: green;
                        position: absolute;
                        animation: animace 4s infinite;
                        animation-direction: alternate;
                }
                @keyframes animace
                {
                        0%, 100% { left: 100px; top: 100px; }
                        25% { width: 125px; height: 125px; left: 250px; top: 100px; }
                        50% { width: 150px; height: 150px; left: 250px; top: 250px; }
                        75% { width: 125px; height: 125px; left: 100px; top: 250px; }
                }
                </style>
                <title>animation-direction</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

animation-direction

Minulý zápis animace si můžeme zkrátit na následující podobu, protože definovat takto každý atribut pro animaci, upsali bychom se. Pro zkrácení však musíme nejdříve definovat následující atributy:

  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
animation: animace 4s infinite 0s alternate;

 

  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í!