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.
✨ 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.
