Animációk
Mozgás nyelv és micro-interakciók
Alapelvek
A yellow animációi visszafogottak, funkcionálisak és természetesek. Nem díszítenek - visszajeleznek.
Gyors és finom
150-300ms időtartam. Elég gyors, hogy ne lassítson, elég lassú, hogy érzékelhető legyen.
Természetes easing
Mindig ease-out vagy cubic-bezier. Lineáris animáció nincs - a természetben sem létezik.
Funkcionális
Minden animáció visszajelzést ad. Ha nincs mit közölni, nincs animáció.
Hover animációk
Interaktív elemek hover állapotai.
| Elem | Hatás | CSS |
|---|---|---|
| Gombok | Háttérszín váltás + enyhe emelkedés | transition-all duration-200 hover:-translate-y-0.5 |
| Kártyák | Felemelkedés + árnyék erősödés | transition-all duration-200 hover:-translate-y-1 hover:shadow-lg |
| Linkek | Színváltás + underline megjelenés | transition-colors duration-150 hover:text-black |
| Képek | Enyhe zoom (scale) | transition-transform duration-300 hover:scale-[1.02] |
| Ikon gombok | Háttér megjelenés + ikon kiemelés | transition-all duration-150 hover:bg-[#F5F5F5] |
Transition specifikációk
Egységes időzítés és easing értékek.
Micro-interakciók
150msease-outLayout animációk
200-300mscubic-bezier(0.4, 0, 0.2, 1)Scroll animációk
400-600mscubic-bezier(0.16, 1, 0.3, 1)Page transition
200msease-outTiltott minták
Ezeket az animációs mintákat kerüljük.
Bounce effekt
Túl játékos, nem illik a professzionális hangvételhez.
Lassú fade-in (>500ms)
Türelmetlenséget kelt, az oldal lassúnak tűnik.
Parallax scroll
Performancia problémákat okoz mobilon, és zavaró lehet.
Auto-play carousel
A felhasználó nem tudja kontrollálni, frusztráló.
CSS változók
Tailwind utility class-ok, amiket használunk:
transition-all duration-150 - micro
transition-all duration-200 - standard
transition-all duration-300 - layout
transition-all duration-500 - scroll/entrance
ease-out - minden hover/focus