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

Naučíme tě pracovat na home-office.

Zjistit více...

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 - Ostatní CSS vlastnosti

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:

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

Článek pro vás napsal Jan Lupčík

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