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

Pomocí CSS 3 vlastnosti animation-delay nastavujeme dobu před začátkem animace. Můžeme tak určit za jak dlouho se animace spustí. Pokud se animace opakuje, čeká se jen jednou.

Hodnoty

0 (výchozí) - Animace začíná ihned.
čas - Nastavitelná doba v sekundách (s) nebo milisekundách (ms).

Ukázka

Vytvořme si jednoduchý modrý div o rozměrech 100px × 100px s posuvnou animací, která se spustí po 4 sekundách.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: blue;
                        position: absolute;
            left: 100px;
            top: 100px;
                        animation: animace 5s linear;
                        animation-delay: 4s;
                }
                @keyframes animace
                {
                        0%, 100% { left: 100px; top: 100px; }
                        25% { left: 250px; top: 100px; }
                        50% { left: 250px; top: 250px; }
                        75% { left: 100px; top: 250px; }
                }
                </style>
                <title>animation-delay</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost animation-delay v CSS 3 - Ostatní CSS vlastnosti

Kvůli animaci s pozicemi si nastavme i defaultní pozici, aby div byl před začátkem na stejné pozici, kde animace končí a i začíná.

Minulý zápis animace si můžeme zkrátit na následující podobu, protože doba před začátkem animace je jako 4. vlastnost atributu animation. Předešlé atributy jsou:

animation-name - Jméno animace
animation-duration - Délka animace
animation-timing-function - Způsob (a rychlost) animace

animation: animace 5s linear 4s;

Č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

Nejčastěji vyhledáváné

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

Hodnoty

Ukázka