CSS animáció készítése

Ebben a cikkben olyan animációkról lesz szó, amelyeket 100%-ban CSS-el oldunk meg, azaz nem egy külső programban készítjük el azokat, majd töltjük fel gifként a weboldalunkra. Nem csak külső programra, de még csak JavaScript-re és Flash-ra sincs szükségünk ahhoz, hogy a böngészőben megjeleníthető animációkat hozzunk létre.

CSS animáció tulajdonságok

Kezdésnek nézzük meg, hogy milyen animáció tulajdonságok léteznek CSS-ben:

• @keyframes (Ezzel az annotációval jelöljük, hogy egy animáció fog következni.)
• animation-name (El kell nevezni az animációt, így hivatkozhatunk rá.)
• animation-duration (Az animáció hossza másodpercben megadva.)
• animation-delay (Itt adhatjuk meg másodpercben, hogy mennyivel szeretnénk késleltetni az animáció elkezdését.)
• animation-iteration-count (Az animáció ismétlődésének száma.)
• animation-direction (Az animáció lejátszásának módját adhatjuk meg.)
• animation-timing-function (Az animáció időtartamát oszthatjuk be.)
• animation-fill-mode (Meghatározhatjuk, hogy mi történjen akkor, amikor éppen nem fut az animáció.)
• animation-play-state (Itt adhatjuk meg, hogy az animáció fusson vagy sem.)
• animation (A fentebb említett tulajdonságokat megadhatjuk egy tulajdonságként is rövidítve.)

A cikk további részében ezeket a tulajdonságokat fogom bemutatni, megmutatom az összes tulajdonság szintaktikáját, továbbá mindegyikhez hozok példákat is, hogy könnyebben megérthető legyen a téma.

@keyframes használata

Ahhoz hogy létrehozzunk egy CSS animációt fontos jeleznünk a böngésző felé, hogy most egy animáció fog következni. Ezt a @keyframes-el tehetjük meg, mely után el kell neveznünk az animációt. Ezzel a névvel kell majd hivatkoznunk rá, amikor valamilyen elemhez szeretnénk kötni. Továbbá ezen belülre írjuk azt, hogy mi történjen az animáció során.

Szintaxis

@keyframes NÉV {
   from { HONNAN; }
   to { HOVA; }
}
Code language: JavaScript (javascript)

A from és a to részhez azt kell megadni, hogy miből mi legyen. A from az a kezdő érték, vagyis ahonnan indulunk. A to pedig az ahova érkezünk. E kettőhöz kb. bármit beírhatunk. Például azt, hogy piros színű és 200 pixeles képből induljunk és végül egy zöld színű 500 pixeles képhez érjünk el.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Meghatároztuk, hogy a sárga háttérszínből zöld legyen. A „from„-hoz kerül, hogy miből, a „to„-hoz, hogy mi legyen. Láthatjuk, hogy ez a kód még nem eredményez semmit, hiszen még nem határoztuk meg, hogy melyik elemre szeretnénk alkalmazni ezt a CSS kódot.

animation-name használata

Most lesz szükségünk arra, ahogyan elneveztük előbb az animációt. A @keyframes után megadott nevet használva tudunk hivatkozni az animációnkra. Az animációt hozzá kell rendelnünk egy HTML elemhez, például egy div-hez.

Szintaktika

HTML.ELEM {
  animation-name: NÉV;
}
Code language: CSS (css)

Egy HTML elem CSS kódjában kell megadnunk azt a nevet, ahogyan előbb elneveztük a @keyframes-ünket.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Látszólag már minden adott ahhoz, hogy az animációnk szépen működjön, de valamiért még mindig nem akar megjelenni.

animation-duration használata

SPOILER ALERT: Itt jön a kulcs, ezzel a kis kóddal most már működni fog a CSS animációnk. Vegyük át, hogy eddig miket határoztunk meg:

• @keyframes
• animation-name

Az elsővel elneveztük az animációnkat és animációt határoztunk meg, míg a másodikkal összekötöttük egy div elemet az animációnkkal. A probléma csupán annyi volt, hogy nem határoztuk meg az animáció időtartamát. És alapértelmezetten az időtartam 0 másodperc, azaz 0 másodpercébe telik míg megcsinálja a változtatást két szín között.

Szintaktika

Most pedig nézzük meg a szintaktikáját az utasításnak, amivel beállíthatjuk, hogy hány másodperc alatt fusson le az adott animáció.

animation-duration: IDŐTARTAM MÁSODPERCBEN;
Code language: HTTP (http)

FONTOS: Ha ezt nem adjuk meg, akkor alapértelmezetten 0 másodpercet állít be és így le sem fut az animáció.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 20s;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ahogy látjátok a div elemre kell beállítani az animáció hosszának megadására szolgáló animation-duration-t.

Ha itt nem látsz semmit, akkor az azért van, mert az animáció a lap betöltésekor indul és túl sok időt töltöttél el az olvasással. Az animáció futási idejére 20 másodpercet állítottam be, szóval ha szeretnéd megnézni működés közben, akkor töltsd újra az oldalt és görgess le eddig. Van rá 20 másodperced, ami bőven elég hozzá.

Vagy másold ki a kódot és illeszd be az online szerkesztőnkbe, ott tökéletes fog működni. (Csak ne felejts el létrehozni egy div-et is hozzá, mert a fentiek csak a CSS kódot tartalmazzák.)

animation-delay használata

Megint egy olyan csúcsszuper dolgot kell bemutatnom, amit nehéz igazán jól szemléltetni. Röviden arról van szó, hogy be lehet állítani, hogy hány másodperccel legyen késleltetve az animáció futása. Azaz a lapbetöltését követően hány másodpercet várjon az animáció indulásával.

Szintaktika

animation-delay: MÁSODPERCEK;
Code language: HTTP (http)

Ez a kód szintén a div elembe kerül.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 20s;
  animation-delay: 5s;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A példát megint nehéz megfelelően bemutatni, mert az oldal betöltésétől megy a számláló. Javaslom, hogy másoljátok ki a kódot és illesszétek be az online weboldal szerkesztőnkbe, amely HTML és CSS futtatására is alkalmas. (Csak ne felejts el létrehozni egy div-et is hozzá, mert a fentiek csak a CSS beállításokat tartalmazzák.)

animation-iteration-count használata

Ezzel a beállítással azt határozhatjuk meg, hogy az adott animáció hányszor játszódjon le. Azaz az ismétlődések számát tudjuk meghatározni.

Szintaxis

animation-iteration-count: ISMÉTLŐDÉSEK SZÁMA;
Code language: HTTP (http)

Az ismétlődések számához beírhatunk konkrét értéket is, azaz például 5, ebben az esetben ötször fog lejátszódni az animáció. Vagy megadhatjuk azt, hogy infinite, ebben az esetben végtelenszer fog ismétlődni a CSS animáció.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 5s;
  animation-iteration-count: infinite;

}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ahogy látjátok ez a kód is a div CSS-ébe megy, így elmondhatjuk általánosságban, hogy a @keyframes-be az animáció konkrét kinézete megy, például a méret-, pozíció-, színváltoztatás stb. Míg a div CSS beállításai közé az animáció lejátszását befolyásoló dolgok kerülnek, például az, hogy hány másodpercig tartson az animáció lejátszása vagy az, hogy hányszor ismétlődjön.

animation-direction használata

Az animate-direction segítségével a lejátszás irányát határozhatjuk meg, mely lehet:

• normal (ilyenkor úgy játssza le az animációt, ahogy meghatároztuk)
• reverse (ebben az esetben visszafele játssza le az animációt)
• alternate (ebben az esetben először rendesen, majd fordítva játssza le az animációt)
• alternate-reverse (ilyenkor először fordítva, majd rendesen játssza le az animációt)

Szintaktika

animation-direction: IRÁNY;
Code language: HTTP (http)

Az irány helyére a fent felsorolt értékeket lehet behelyettesíteni.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: reverse;

}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti kódban bennhagytam a korábban már meghatározott CSS animáció tulajdonságokat, így például azt is, hogy ismétlődjön az animáció, ezáltal jobban szemügyre vehetőek a kódok. Továbbá az éppen kitárgyalandó animation-direction is hozzáadtam reverse értékkel, aminek köszönhetően az animáció visszafele fog lejátszódni. Ugyebár mi azt adtuk meg, hogy sárgából váltson zöldre, de ez éppen fordítva történik, így a kódunk tökéletesen működik.

animation-timing-function használata

Ahogy fentebb már volt róla szó, ezzel az animáció időtartamát oszthatjuk be. Pontosabban fogalmazva az animáció időgörbéjét adhatjuk meg. Azaz megfogalmazhatjuk, hogy az elején gyorsabban fusson, míg a végén lassabban. Nézzük milyen értékeket vehet fel az animation-timing-function tulajdonság:

• ease (lassan kezdődik, gyorsan folytatódik, majd a végére megint lelassul)
• linear (egyenletes sebességet biztosít az egész animáció számára)
• ease-in (lassú kezdés)
• ease-out (lassú befejezés)
• ease-in-out (lassú kezdés és befejezés)
• cubic-bezier(x,x,x,x) (saját sebesség görbét határozhatunk meg)

Szintaktika

animation-timing-function: ÉRTÉK;
Code language: PHP (php)

Az érték helyére a fenti felsorolásból kell választani.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

animation-fill-mode használata

Az animációk csak a futási idejükre vannak meghatározva, az animation-fill-mode segítségével azt állíthatjuk be, hogy az animáció futása előtt vagy futása után mi történjen. Ezeket az értékeket veheti fel:

• none (Ebben az esetben nem történik semmi.)
• forwards (Az utolsó értéket tartja meg.)
• backwards (Az első értéket tartja meg.)
• both (Mindkét értéket megtartja.)

Az érték megtartást úgy kell értelmezni, hogy ha az van beállítva, hogy a háttérszín pirosból megy kékbe, és az animation-fill-mode értékének a forwards-ot adjuk, akkor a kék értéket fogja megjeleníteni, akkor amikor éppen nem fut az animáció.

Szintaxis

animation-fill-mode: ÉRTÉK;
Code language: HTTP (http)

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 20s;
  animation-fill-mode:forwards;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha itt éppen egy zöld négyzetet látsz, akkor későn jutottál el idáig és az animáció már lefutott. A helyzet a szokásos: töltsd újra az oldalt és tekerj gyorsan le, vagy töltsd fel a kódot ide: online HTML és CSS webszerkesztő. (Ne felejtsd el, hogy fent csak CSS kód van megírva, amihez neked meg kell még írnod a div-et. Semmi többet és már a program futtatható is.)

animation-play-state használata

Ezzel azt tudjuk beállítani, hogy az animáción fusson-e vagy sem. Felvehető értékek:

• paused (nem fut)
• running (fut)
• initial (alapértelmezett)
• inherit (örökli, hogy fut-e vagy sem)

Szintaktika

animation-play-state: ÉRTÉK;
Code language: HTTP (http)

A fenti értékekből válassz egyet.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation-name: animacio;
  animation-duration: 20s;
  animation-play-state:paused; 
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Mivel az animáció el sem indul, így a kezdeti értéket tartja meg, ami a sárga szín.

animation használata

Az animation segítségével azt érhetjük el, hogy az egyes CSS animáció tulajdonságot ne kelljen külön-külön megadni, hanem elég legyen csak egyetlen sorba belesűrítve leírni. Az animation használatával ezt a hat CSS animáció tulajdonságot tudjuk lerövidítve megadni:

• animation-name (animáció név)
• animation-duration (animáció idő)
• animation-timing-function (animáció futási görbe)
• animation-delay (animáció késleltetés)
• animation-iteration-count (ismétlések száma)
• animation-direction (lejátszási irány)

Szintaktika

animation: NÉV IDŐ GÖRBE KÉSLELTETÉS ISMÉTLÉSEK IRÁNY;
Code language: HTTP (http)

Példa

@keyframes animacio {
   from {
     background-color: yellow;
        }
   to {
     background-color: green;       
      }
}

div {
  animation: animacio 5s linear 0s infinite normal;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Látjuk, hogy az animáció ugyanúgy működik, mintha ezeket a tulajdonságokat és értékeket külön-külön adtuk volna meg.

Animáció egér ráhúzásra

Utolsó lehetőségként azt mutatnám meg, hogy hogyan lehet aktiválni egy animációt csak egér ráhúzásra. Korábban már tanultunk a hover-ről, ezt kell most alkalmaznunk. A példában most nem csak egy szimpla színváltoztatást fogok megmutatni, mert azt már láttátok párszor, hanem egy méretváltoztatást is.

Példa

@keyframes animacio {
   from {
     background-color: yellow;
     width: 200px;
     height: 200px;
        }
   to {
     background-color: green;       
     width: 300px;
     height: 300px;
      }
}

div {
  background-color: yellow;
}

div:hover {
  animation: animacio 5s linear 0s infinite alternate;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti kódban beállítottam, hogy a kezdő érték a sárga szín és a 200×200-as méret legyen, míg a végérték a zöld szín és a 300×300-es méret. Továbbá az animációnak azt adtam, hogy infinite és alternate, amelynek köszönhetően folyamatosan oda-vissza fog játszódni az animáció.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!