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:

animation-name - Jméno animace
animation-duration - Délka animace
Tento atribut
animation-delay - Doba před spuštěním animace
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

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

Nejčastěji vyhledáváné

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

Hodnoty

Ukázka