Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Slevový týden - Březen 30

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

V předchozí lekci, Animace efektů při interakci s elementy (tooltip), 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í:

Průběhy animací
localhost

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:

Průběh animace
localhost

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;}
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

Průběh animace - Linear
localhost

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é:

Průběh animace - Ease
localhost

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:

Průběh animace - Ease-in
localhost

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:

Průběh animace - Ease-out
localhost

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:

Průběh animace - Ease-in-out
localhost

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:

Průběh animace - Step-Start
localhost

step-end

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

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

Výsledek animace:

Průběh animace - Step-End
localhost

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:

Průběh animace - Steps
localhost

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):

Průběh animace - Cubic-Bezier
localhost

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ů, si ukážeme, jak lze otáčet elementy ve 2D a 3D prostoru. Využijeme při tom funkce matrix(), rotate() a skew().


 

Stáhnout

Staženo 48x (1.23 kB)

 

Předchozí článek
Animace efektů při interakci s elementy (tooltip)
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (3)

 

 

Komentáře

Avatar
Yuriy Tretyachenko:19. února 20:27

V 7. lekci bylo urceno poradi ve zkracene podobe animation: nazev delka prubeh; Tady v kodech vidim animation: delka nazev prubeh;. Takze na poradi nezalezi?

 
Odpovědět
19. února 20:27
Avatar
Yuriy Tretyachenko:19. února 20:49

Jaky rozdil mezi ease-in-out a ease?

 
Odpovědět
19. února 20:49
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
 
Odpovědět
19. února 21:25
Avatar
Filip Opluštil
Redaktor
Avatar
Odpovídá na Yuriy Tretyachenko
Filip Opluštil:22. února 8:40

Ve většině případů není pořadí zápisu důležité, dodržuje se spíše aby byl kód přehledný.

 
Odpovědět
22. února 8:40
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.

Zobrazeno 4 zpráv z 4.