Lekce 10 - Průběhy animací elementů v CSS3

V předchozí lekci, Interakce s elementy v CSS3, jsme si ukázali, jak se dají měnit elementy, když je uživatel například překryje kurzorem myši.

Vítejte u další lekce ohledně animací v CSS3, ve které si ukážeme průběhy animací.

V této lekci se naučíme následující průběhy animací:

Typy průběhu funkce

V této lekci pro nás bude důležitá znalost matematiky, a to konkrétně průběh funkcí. Jak jsme si již ukázali v předchozích lekcích, změny a animace elementů na stránce mohou mít určité průběhy. Buď se provedou okamžitě, nebo s nějakým časovým průběhem. Teď se podíváme na všechny způsoby nastavení časových průběhů funkcí, které nám CSS3 umožňuje:

• linear - Animace probíhá stejně rychle v každém časovém okamžiku.
• ease - Animace probíhá na začátku pomalu, poté rychle a na konec znovu pomalu (výchozí nastavená animace).
• ease-in - Animace probíhá ze začátku pomalu a poté rychle.
• ease-out - Animace probíhá rychle a ke konci pomalu.
• ease-in-out - Animace probíhá na začátku i na konci pomalu (je pomalejší než ease).
• step-start - Animace probíhá skokem, a poté končí na začátku průběhu (stejně jako steps(1, start)).
• step-end - Animace probíhá skokem a poté končí na konci průběhu (stejně jako steps(1, end)).
• steps(n, start/end) - Animace probíhá po krocích, a poté končí buď na začátku nebo konci průběhu.
• cubic-bezier(n, n, n, n) - Animace spojitá v čase s tím, že uživatel definuje vlastní hodnoty pro funkci (mohou být od 0 do 1).
• initial - Animace se nastaví na výchozí hodnotu (ease).
• inherit - Animace se nastaví podle hodnoty nadřazeného elementu.

Abychom si je všechny názorně ukázali, vytvoříme si stránku s barevným kruhem:

<div class="title">Průběh animace</div>
<br>
<br>
<div class="kruh"></div>

V CSS nastylujeme popis a vytvoříme kruh pomocí vlastnosti border-radius:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.title {
    text-transform: uppercase;
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
}

.kruh {
    width: 70px;
    height: 70px;
    background-color: blue;
    border-radius: 100%;
}

Máme tedy zatím toto:

linear

Jak jsme si již popsali, průběh této funkce je v každém jejím časovém úseku stejně rychlý. Vytvoříme si tedy ještě třídu .animation:

<div class="title">Průběh animace - Linear</div>
<br>
<br>
<div class="kruh animation"></div>

K třídě si vytvoříme ještě keyframes animace. Tu potom přidáme k našemu kruhu:

.animation {
    animation: 5s animace linear infinite;
}

@keyframes animace {
    0%{margin-left: -700px;}
    50%{margin-left: 700px;}
    100%{margin-left: -700px;}
}

Ve výsledku máme tento průběh:

ease

Jak už jsme zmínili v tabulce na začátku článku, toto je přednastavený průběh všech animací. Ze začátku se element mění pomalu, poté rychle a na konci opět pomalu. Upravíme naši třídu .animation, a to tak, že jí ve vlastnosti animation nastavíme místo linear hodnotu ease:

.animation {
    animation: 5s animace ease infinite;
}

V HTML pozměníme jen nadpisek animace, jinak bude HTML vždy totožné:

ease-in

Animace s pomalým průběhem na začátku a rychlým průběhem na konci. Opět provedeme nutné úpravy naší třídy .animation:

.animation {
    animation: 5s animace ease-in infinite;
}

HTML je tedy totožné a jako výsledek budeme mít toto:

ease-out

Obrácený průběh oproti ease-in, za začátku rychlý průběh a ke konci pomalý:

.animation {
    animation: 5s animace ease-out infinite;
}

Výsledek:

ease-in-out

Kombinace průběhů ease-in a ease-out nám dává průběh ease-in-out, neboli animaci s pomalým začátkem a koncem:

.animation {
    animation: 5s animace ease-in-out infinite;
}

Ukázka:

step-start

Animace s jednokrokovým průběhem na začátku (viz. steps níže):

.animation {
    animation: 5s animace step-start infinite;
}

Ukázka průběhu:

step-end

Animace s jednokrokovým průběhem na konci (viz. steps):

.animation {
    animation: 5s animace step-end infinite;
}

Výsledek animace:

steps

Tato animace se nastavuje pomocí dvou parametrů, a to počtu kroků a hodnoty start nebo end. Pokud se nastaví pouze počet kroků, přednastavená hodnota je end. Počet nastavených kroků musí být větší než 0, jinak se animace neprovede. Hodnota start označuje levou spojitou funkci, takže k prvnímu kroku dojde, když animace začne. Hodnota end naopak označuje pravou spojitou funkci, takže poslední krok se provede jakmile animace skončí. Pro ukázku použijeme steps(10, end):

.animation {
    animation: 5s animace steps(10, end) infinite;
}

Ukázka průběhu steps:

cubic-bezier

Jako poslední průběh si ukážeme cubic-bezier. Toto nastavení průběhu animace je specifické v tom, že uživatel sám definuje parametry. Parametry jsou celkem 4. První a poslední definují počáteční a konečný čas průběhu (nejčastěji tedy 0 pro začátek animace a 1 pro konec animace). Druhý a třetí určují zrychlení změny v první polovině a druhé polovině. Hezky je to vidět na stránkách cubic-bezier.com:

.animation {
    animation: 5s animace cubic-bezier(1, -0.94, 0.09, 1.57) infinite;
}

Jako poslední máme číslo 1.57. Řekli jsme si, že hodnota 1 je konec animace, 1.57 je tedy nadmíru (odejde z bloku):

A to je vše, nyní už umíme u našich animací nastavit jakýkoliv pohyb v čase. Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce

V další lekci, Rotace elementů v CSS3, si ukážeme, jak lze otáčet elementy ve 2D a 3D prostoru. Využijeme při tom funkce matrix(), rotate() a skew().