10. diel - Priebehy animácií elementov

V predchádzajúcej lekcii, Animácie efektov pri interakcii s elementmi (tooltip) , sme si ukázali, ako sa dajú meniť elementy, keď je používateľ napríklad prekryje kurzorom myši.

Vitajte u ďalšej lekcie ohľadom animácií v CSS3, v ktorej si ukážeme priebehy animácií.

V tejto lekcii sa naučíme nasledujúce priebehy animácií:

Typy priebehu funkcie

V tejto lekcii pre nás bude dôležitá znalosť matematiky, a to konkrétne priebeh funkcií. Ako sme si už ukázali v predchádzajúcich lekciách, zmeny a animácie elementov na stránke môžu mať určité priebehy. Buď sa vykonajú okamžite, alebo s nejakým časovým priebehom. Teraz sa pozrieme na všetky spôsoby nastavenie časových priebehov funkcií, ktoré nám CSS3 umožňuje:

• linear - Animácia prebieha rovnako rýchlo v každom časovom okamihu.
• ease - Animácia prebieha na začiatku pomaly, potom rýchlo a na koniec znovu pomaly (predvolená nastavená animácia).
• ease-in - Animácia prebieha zo začiatku pomaly a potom rýchlo.
• ease-out - Animácia prebieha rýchlo a ku koncu pomaly.
• ease-in-out - Animácia prebieha na začiatku i na konci pomaly (je pomalší ako ease).
• step-start - Animácia prebieha skokom, a potom končí na začiatku priebehu (rovnako ako steps(1, start)).
• step-end - Animácia prebieha skokom a potom končí na konci priebehu (rovnako ako steps(1, end)).
• steps(n, start/end) - Animácie prebieha po krokoch, a potom končí buď na začiatku alebo konci priebehu.
• cubic-bezier(n, n, n, n) - Animácie spojitá v čase s tým, že používateľ definuje vlastné hodnoty pre funkciu (môžu byť od 0 do 1).
• initial - Animácie sa nastaví na predvolenú hodnotu (ease).
• inherit - Animácie sa nastaví podľa hodnoty nadradeného elementu.

Aby sme si ich všetky názorne ukázali, vytvoríme si stránku s farebným kruhom:

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

<br>

<div class="kruh"></div>

V CSS nastylujeme opis a vytvoríme kruh pomocou 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 teda zatiaľ toto:

linear

Ako sme si už popísali, priebeh tejto funkcie je v každom jej časovom úseku rovnako rýchly. Vytvoríme si teda ešte triedu .animation:

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

<br>

<div class="kruh animation"></div>

K triede si vytvoríme ešte keyframes animace. Tú potom pridáme k nášmu kruhu:

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

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

Vo výsledku máme tento priebeh:

ease

Ako už sme spomenuli v tabuľke na začiatku článku, toto je prednastavený priebeh všetkých animácií. Zo začiatku sa element mení pomaly, potom rýchlo a na konci opäť pomaly. Upravíme našu triedu .animation, a to tak, že jej vo vlastnosti animation nastavíme miesto linear hodnotu ease:

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

V HTML pozmeníme len nadpis animácie, inak bude HTML vždy totožné:

ease-in

Animácie s pomalým priebehom na začiatku a rýchlym priebehom na konci. Opäť vykonáme potrebné úpravy našej triedy .animation:

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

HTML je teda totožné a ako výsledok budeme mať toto:

ease-out

Obrátený priebeh oproti ease-in, za začiatku rýchly priebeh a ku koncu pomalý:

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

výsledok:

ease-in-out

Kombinácia priebehov ease-in a ease-out nám dáva priebeh ease-in-out, čiže animáciu s pomalým začiatkom a koncom:

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

ukážka:

step-start

Animácie s jednokrokovým priebehom na začiatku (viď. steps nižšie):

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

Ukážka priebehu:

step-end

Animácie s jednokrokovým priebehom na konci (viď. steps):

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

Výsledok animácie:

steps

Táto animácia sa nastavuje pomocou dvoch parametrov, a to počtu krokov a hodnoty start alebo end. Ak sa nastaví iba počet krokov, prednastavená hodnota je end. Počet nastavených krokov musí byť väčšia ako 0, inak sa animácia nevykoná. Hodnota start označuje ľavú spojitú funkciu, takže k prvému kroku dôjde, keď animácie začne. Hodnota end naopak označuje pravú spojitú funkciu, takže posledný krok sa vykoná akonáhle animácia skončí. Pre ukážku použijeme steps(10, end):

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

Ukážka priebehu steps:

cubic-bezier

Ako posledný priebeh si ukážeme cubic-bezier. Toto nastavenie priebehu animácie je špecifické v tom, že užívateľ sám definuje parametre. Parametre sú spolu 4. Prvý a posledný definujú počiatočný a konečný čas priebehu (najčastejšie teda 0 pre začiatok animácie a 1 pre koniec animácie). Druhý a tretí určujú zrýchlenie zmeny v prvej polovici a druhej polovici. Pekne je to vidieť na stránkach cubic-bezier.com:

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

Ako posledný máme číslo 1.57. Povedali sme si, že hodnota 1 je koniec animácie, 1.57 je teda nadmieru (odíde z bloku):

A to je všetko, teraz už vieme u našich animácií nastaviť akýkoľvek pohyb v čase. Pokiaľ nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť v prílohe tejto lekcie:)

V ďalšej lekcii, Rotácia elementov , si ukážeme, ako možno otáčať elementy v 2D a 3D priestore. Využijeme pri tom funkcie matrix(), rotate() a skew().