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

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

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;

 

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