A CSS animáció lehetővé teszi, hogy HTML elemek stílusát fokozatosan megváltoztassuk időben, anélkül, hogy JavaScriptet használnánk. Az animációkhoz az @keyframes szabályt és az animation tulajdonságot használjuk.
Hogyan lehet animálni?
- Létrehozol egy @keyframes szabályt, ami meghatározza az állapotokat.
- Hozzárendeled az animációt az elemhez az
animationproperty segítségével. - Finomhangolod az időzítést, ismétlést, irányt.
@keyframes
Ez határozza meg az animáció lépéseit (állapotait) százalékos arányban:
|
1 2 3 4 5 |
@keyframes animációNeve { 0% { /* kezdő állapot */ } 50% { /* köztes állapot */ } 100% { /* végállapot */ } } |
utána az adott elemhez rendeljük az animációt
|
1 2 3 4 5 6 7 8 9 |
selector { animation-name: animációNeve; animation-duration: 3s; /* időtartam */ animation-timing-function: ease; /* sebesség görbe */ animation-delay: 1s; /* késleltetés */ animation-iteration-count: infinite; /* ismétlések száma */ animation-direction: alternate; /* irány (normal, reverse, alternate) */ nimation-fill-mode: /* hogyan viselkedik az animáció előtt/után (none, forwards, backwards, both)*/ } |
Itt is lehet használni rövidített formát:
|
1 |
animation: animációNeve 3s ease-in-out 1s infinite alternate; |
CSS Transition
A transition lehetővé teszi, hogy egy elem stílusváltozásai (például szín, méret, pozíció) fokozatosan, animáltan történjenek, nem pedig azonnal. Általában hover, focus, vagy más állapotváltáskor használjuk.
|
1 2 3 |
selector { transition: property duration timing-function delay; } |
példa
|
1 2 3 4 5 6 7 8 |
button { background-color: blue; transition: background-color 0.5s ease-in-out; } button:hover { background-color: red; } |
| transition-property | Melyik CSS tulajdonság animálódjon. | |
| transition-duration | Mennyi ideig tart az átmenet. | |
| transition-timing-function | Sebesség görbe. | |
| transition-delay | Késleltetés az animáció előtt. |