IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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-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 - Ostatní CSS vlastnosti

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