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.