animation-timing-function - Český CSS 3 manuál

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

Pomocí CSS 3 vlastnosti animation-timing-function nastavujeme rychlostní křivku animace. Můžeme si také vytvořit svoji vlastní.

Hodnoty

  • ease (výchozí) - Animace začíná pomalu, poté zrychlí a ke konci je pomalejší.
  • ease-in - Animace má pomalý začátek a rychlý konec.
  • ease-out - Animace má rychlý začátek a pomalý konec.
  • ease-in-out - Animace nabývá obou předešlých hodnot - má pomalý začátek a pomalý konec.
  • linear - Animace má celou dobu stejnou rychlost.
  • cubic-bezier(číslo, číslo, číslo, číslo) - Vlastní nastavení rychlostní křivky animace. Hodnota číslo musí nabývat hodnoty 0-1. Můžeme využít na vytváření tento nástroj.

Ukázka

Vytvořme si jednoduchý div o velikosti 100px × 100px, který bude představovat kruh se světle modrou barvou. Ten se bude neustále posouvat dokola (1 celé proběhnutí animace trvá 4 sekundy). Vytvoříme mu však vlastní rychlostní křivku, která je podobná hodnotě ease, akorát je rychlejší.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        background-color: #B6E3EA;
                        position: absolute;
                        animation: animace 4s;
                        animation-iteration-count: infinite;
                        animation-timing-function: cubic-bezier(0, 0.7, 0.6, 1);
                }
                @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-timing-function</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

animation-timing-function

Minulý zápis si však můžeme zkrátit hlavním atributem animace - animation. Abychom však mohli zápis zkrátit, musíme definovat následující atributy:

  1. animation-name - Jméno animace
  2. animation-duration - Délka animace
  3. Tento atribut
  4. animation-delay - Doba před spuštěním animace
  5. animation-iteration-count - Počet opakování animace
animation: animace 4s cubic-bezier(0, 0.7, 0.6, 1) 0s infinite;

 

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