CSS animációk

A CSS animációk lehetővé teszik, hogy egy elem megjelenése fokozatosan változzon meg, például szín, méret, pozíció vagy áttetszőség tekintetében. Az animációk kulcsfontosságúak a modern, dinamikus weboldalak létrehozásában.

Egyszerű animáció @keyframes segítségével

Az @keyframes szabály határozza meg az animáció lépéseit. Megadhatjuk, hogy az elem állapota hogyan változzon a kezdeti és a végső pont között.

Ebben a példában egy doboz háttérszíne pirosról sárgára vált, majd vissza, végtelen ismétléssel.

Animációs tulajdonságok

Az animációk több al-tulajdonság segítségével szabályozhatók. Ezek közül néhány a név, az időtartam, a sebességfüggvény, a késleltetés és az ismétlések száma.

Tulajdonság	Leírás
animation-name	Meghatározza, melyik @keyframes animációt használja az elem.
animation-duration	Az animáció időtartama másodpercben vagy ezredmásodpercben.
animation-timing-function	Az animáció sebességgörbéje (pl. ease, linear, ease-in, ease-out).
animation-delay	Mennyi idővel később induljon el az animáció.
animation-iteration-count	Hányszor ismétlődjön az animáció (például végtelen is lehet).
animation-direction	Az animáció iránya (pl. normal, reverse, alternate).

Tippek a CSS animációkhoz

Az alábbi tanácsok segítenek abban, hogy animációid ne csak látványosak, hanem hatékonyak is legyenek:

Használj animációt mértékkel: a túl sok mozgás zavaró lehet.
Animáld a teljesítménybarát tulajdonságokat (pl. transform, opacity), ne a layout-ra hatókat (pl. width, height).
Kombináld az animációkat és az átmeneteket a természetesebb hatás érdekében.