Mire valók a keyframe-ek és hogyan működnek?

@keyframes — CSS szabály, amely meghatározza egy animáció kulcskockáit. Lehetővé teszi egy elem állapotainak sorozatának létrehozását különböző időpontokban, amelyeket a böngésző simán interpolál, mozgáshatást létrehozva. A szabály meghatározásával egy stílusok halmazát írja le az elemre bizonyos időszakokban (0% -tól 100% -ig), vagy a from (0%) és to (100%) kulcsszavak használatával.

A keyframes használatához:

1. Határozza meg az @keyframes szabályt egy egyedi névvel.
2. Az @keyframes belsejében adjon meg stílusokat különböző időpontokra (százalékban vagy from/to).
3. Alkalmazza a létrehozott animációt az elemre a CSS animation tulajdonság segítségével.

@keyframes slidein {
  from {
    transform: translateX(0%); // Kezdeti állapot: nincs eltolás X irányban
  }

  to {
    transform: translateX(100%); // Végállapot: 100%-os eltolás X irányban
  }
}

.element {
  animation-name: slidein; // A fent definiált animáció neve
  animation-duration: 3s; // Az animáció időtartama
  animation-timing-function: ease-in-out; // Az animáció sebességfüggvénye
  animation-delay: 1s; // Késleltetés az animáció kezdete előtt
  animation-iteration-count: infinite; // Ismétlések száma (itt végtelen)
  animation-direction: alternate; // Az animáció iránya (egyenes, majd fordított)
}

Az animation fő tulajdonságai, amelyeket az @keyframes-szel együtt használnak:

Tulajdonság	Leírás
animation-name	Az alkalmazandó @keyframes neve.
animation-duration	Egy animációs ciklus időtartama (pl. 2s, 500ms).
animation-timing-function	Az animáció sebességfüggvénye (pl. linear, ease, ease-in, cubic-bezier).
animation-delay	Késleltetés az animáció kezdete előtt (pl. 1s).
animation-iteration-count	Az animáció ismétlésszáma (infinite végtelen ismétléshez).
animation-direction	Az animáció iránya (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Meghatározza, hogy az animáció előtt és után milyen stílusok alkalmazandók.
animation-play-state	Meghatározza, hogy az animáció fut vagy szünetel.