Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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-duration - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation-duration nastavujeme dobu trvání celé animace. Můžeme tedy takto určit rychlost animace.

Hodnoty

  • 0 (výchozí) - Animace se vůbec nespouští. Proto je potřeba přenastavit výchozí hodnotu na nějaký čas.
  • čas - Nastavitelná doba v sekundách (s) nebo milisekundách (ms).

Ukázka

Vytvořme si obyčejný zelený div o velikosti 100px × 100px s posuvnou animací, která bude trvat 2 sekundy.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: green;
                        position: absolute;
            left: 100px;
            top: 100px;
                        animation: animace linear;
                        animation-duration: 2s;
                }
                @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-duration</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

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

Minulý zápis si můžeme zkrátit, abychom nemuseli psát tak dlouhé animace. Zápis si zkrátíme do atributu animation. Abychom si to však mohli zkrátit, musíme definovat následující atributy:

  1. animation-name - Jméno animace
  2. Tento atribut
  3. animation-timing-function - Způsob (a rychlost) animace
animation: animace 2s linear;

 

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