Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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;

 

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ích v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
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í!