C# týden Slevový týden - Březen
Využij náš slevový týden a získej až 30 % bodů navíc zdarma! Zároveň také probíhá C# týden se slevou na e-learning až 80 %
Hledáme fulltime programátora do ITnetwork týmu -100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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;

 

 

Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitního módu TruckersMP.
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

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