Animációk és átmenetek.

Két eszköz van: az átmenet (transition) két állapot között simít (pl. rámutatáskor), az animáció (@keyframes + animation) magától, akár végtelenül fut. A Bootstrapben nincs sok beépített animáció – ezeket saját CSS-sel készítjük, a Bootstrap rácsában és komponensein.

• transition és transform
• kulcskockás animáció (@keyframes)
• mikro-interakciók: gomb, mező, töltősáv, ikon
• összetett effektek és csökkentett mozgás

A transition: transform 0.3s ease azt mondja: ha a transform értéke megváltozik, 0,3 másodperc alatt, lassuló-gyorsuló ütemben menjen át az új értékre. A változást a :hover állapot okozza. Animálni a transform-ot és az opacity-t érdemes: ezeket a böngésző olcsón, akadozás nélkül rajzolja.

A @keyframes az animáció „forgatókönyve”: százalékban megadott időpontokban (0%, 50%, 100%) milyen értéke legyen egy tulajdonságnak. Az animation tulajdonság rendeli hozzá az elemhez: név, időtartam, ütem, ismétlés (infinite = végtelen).

Apró, gyors visszajelzések: a gomb reagál a rámutatásra, a mező jelzi a fókuszt, a töltősáv a folyamatot, az ikon a kattintást. A lebegő címke most a placeholder=" " (egy szóköz) trükkel működik: a :placeholder-shown csak üres mezőre illeszkedik, így a címke gépeléskor fent marad, és nem takar ki semmit.

Képkártya beúszó felirattal, 3D-ben forduló kártya és lépcsőzetesen megjelenő idővonal. Az idővonal elemei egymás után, késleltetéssel (animation-delay) jelennek meg; mobilon (768 px alatt) a vonal balra kerül.

1. Készíts navigációs menüt, amelynek pontjai alá rámutatáskor balról jobbra kihúzódó vonal kerül (::after + transform: scaleX()).
2. Készíts két különböző betöltő animációt (pontok, forgó kör).
3. Készíts értesítést (toast-szerű dobozt), amely jobbról beúszik, 3 másodperc múlva eltűnik.
4. Kapcsold be a rendszeredben a „mozgás csökkentése” beállítást, és ellenőrizd, hogy az oldalad animációi leállnak-e.