Transformace, přechody, animace klíčových snímků (keyframes)
Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Teorie pokrývá tři pilíře (transform, transition, animation), performance, accessibility a praktiku.
| Pojem | CSS vlastnost | K čemu slouží |
|---|---|---|
| Transformace | transform |
Statická změna podoby prvku (posun, rotace, zvětšení, zkosení) |
| Přechody | transition |
Plynulá změna mezi dvěma stavy (typicky :hover) |
| Animace | @keyframes + animation |
Předdefinovaná posloupnost změn, může běžet sama dokola |
Vztah mezi nimi: Transformace se transformuje (jak teď vypadá). Transition a animation animují přechod (jak se mění v čase). Často se kombinují:
transitionplynule posunetransform,keyframesměnítransformpo snímcích.
CSS animations a transitions byly přidány do specifikace CSS3 v roce 2009-2012. Před nimi se UI animace dělaly v JavaScriptu (jQuery animations) nebo Flash. Dnes je CSS animation hlavní way to go, jQuery animace jsou legacy.
Moderní rozšíření:
@starting-style (2024): animace při prvním zobrazení elementuPro maturitu stačí klasické tři vlastnosti, ale stojí za to vědět, že CSS animace se dál vyvíjejí.
transform)transform mění tvar nebo polohu prvku, aniž by ovlivnil layout. Ostatní prvky se neposunou, prvek si "ukočičí svoji vlastní reality bez okolního světa".
transform| Funkce | Příklad | Co dělá |
|---|---|---|
translate(x, y) |
translate(20px, 50px) |
Posun po obou osách |
translateX(x) / translateY(y) |
translateY(-10px) |
Posun po jedné ose |
rotate(angle) |
rotate(45deg) |
Otočení (kladné = po směru hodinových ručiček) |
scale(x, y) |
scale(1.2) nebo scale(2, 0.5) |
Zvětšení / zmenšení |
scaleX(x) / scaleY(y) |
scaleY(0.5) |
Zvětšení po jedné ose |
skew(x, y) |
skew(20deg, 0) |
Zkosení (lichoběžník, kosočtverec) |
matrix(...) |
matrix(1, 0, 0, 1, 0, 0) |
Vše najednou (ručně se nepoužívá) |