Pohyb

Animace

Transition reaguje na změnu. Animace běží sama: při načtení stránky, dokola, nebo jednou a dost.

Rozhýbeme stránku s fotkami: točící se kolečko načítání, nadpis, který vyjede, a pulzující počet zpráv. V náhledu vidíte, kam se dostaneme.

Začátek

Všechno stojí

Nadpis s popiskem, tlačítko se zprávami a kolečko načítání. Kolečko je jen kruh s jedním červeným dílkem borderu a zatím se netočí.

Červený počet zpráv je umístěný přes position: absolute, kolečko je čtverec se border-radius: 50%.

Vlastnost · 1

@keyframes

Animace má dvě části. V @keyframes pojmenujeme, jak má pohyb vypadat: tady na konci otočení o celou otáčku. Vlastnost animation ji pak prvku přiřadí.

spin je náš název, 1s délka jedné otáčky, linear stálá rychlost a infinite = dokola. Začátek jsme nepsali: animace vyjde z toho, jak prvek vypadá.

Vlastnost · 2

Od from do to

Nadpis po načtení stránky vyjede zespodu a zároveň se objeví. Tentokrát popíšeme začátek i konec. Animace proběhne jednou.

Náhled se při každém kroku načte znovu, takže animaci uvidíte, když se na tento krok vrátíte. Na skutečné stránce proběhne jen jednou, po načtení.

Vlastnost · 3

Mezikroky v procentech

Počet zpráv má pulzovat: zvětšit se a zase zmenšit. Místo from a to lze psát procenta a přidat libovolné mezikroky.

0% je totéž co from, 100% totéž co to. Víc procent oddělených čárkou sdílí jeden keyframe.

Vlastnost · 4

Zpoždění a both

Popisek pod nadpisem vyjede o chvilku později než nadpis. Přidáme zpoždění 0.3s a hodnotu both: během čekání bude popisek neviditelný, jako v prvním keyframu.

Bez both by byl popisek během zpoždění vidět, pak by zmizel a teprve vyjel. Jedna sada @keyframes se dá použít pro víc prvků.

Responzivita a přístupnost

Když pohyb vadí: prefers-reduced-motion

Některým lidem se z pohybu na obrazovce dělá špatně, a tak si v systému zapnou „Omezit pohyb“. Stránka se to dozví přes @media a ozdobné animace vypne. Kolečko necháme, jen zpomalíme: pořád ukazuje, že se načítá.

Vyzkoušejte: na Macu Nastavení → Zpřístupnění → Displej → Omezit pohyb, ve Windows Nastavení → Usnadnění přístupu → Vizuální efekty → Animační efekty. Náhled se přizpůsobí hned.

Shrnutí

Pohyb s mírou

Ano

• @keyframes s výstižným názvem
• infinite jen u načítání a drobných upozornění
• zpoždění a both pro postupné objevování
• rozhýbávat transform a opacity
• prefers-reduced-motion na každé stránce s animacemi

Ne

• nekonečné animace u textu, který se má číst
• pohyb, který nejde vypnout

Další lekce: Media queries →