CSS átmenetek
A CSS átmenetek lehetővé teszik, hogy az elemek állapotváltozásai (például szín, méret, pozíció) fokozatosan, animált módon történjenek meg, nem pedig azonnal.
Egyszerű színátmenet
A transition tulajdonság segítségével egy gomb háttérszíne fokozatosan változhat át egy másik színre hover eseménykor.
Ebben a példában a gomb alap színe kékre van állítva, hover állapotban pedig zöldre változik, lassú átmenettel.
Méretváltozás átmenettel
Az átmenetek nem csak színeknél, hanem méreteknél is használhatók. Egy doboz szélessége és magassága fokozatosan növekedhet hover állapotban.
Transition tulajdonságok
A transition több al-tulajdonságból épül fel, amelyek külön-külön szabályozzák az animáció működését.
| Tulajdonság | Leírás |
|---|---|
| transition-property | Meghatározza, mely CSS tulajdonságra vonatkozzon az átmenet. |
| transition-duration | Az átmenet időtartama másodpercben vagy ezredmásodpercben. |
| transition-timing-function | Az átmenet sebességgörbéje, például ease, linear, ease-in, ease-out. |
| transition-delay | Késleltetés az átmenet indítása előtt. |
Tippek a CSS átmenetekhez
Az alábbi tanácsok segítenek a CSS átmenetek hatékony használatában:
- Ne animálj túl sok tulajdonságot egyszerre, mert ronthatja a teljesítményt.
- Használj rövid időtartamot, hogy az animáció ne legyen túl lassú.
- Kombináld az átmeneteket a :hover, :focus vagy :active állapotokkal a jobb felhasználói élményért.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
