A legtöbb kezdő webszerkesztő azt hiszi, hogy óriási mennyiségű anyagot kell megtanulnia ahhoz, hogy weboldalát látványosabbá tehesse egy-egy animációval. Ez nem így van! - És erre én is csak nemrég jöttem rá. :) Ebben a cikkben bemutatom, hogy hogyan készítsünk animációt CSS segítségével!

Nemrég írtam egy cikket, amiben már mutattam hasonló érdekes megoldásokat, viszont most mindent kicsit máshogy fogunk csinálni.

Itt sem fogunk használni Javascriptet, mert azt én sem szeretem (és nem is ismerem), meg a weboldalunkat is lassítaná. A kulcszó: keyframes. Hozzunk létre CSSben egy #animalt-teglalap nevű divet, majd adjunk neki néhány tulajdonságot: szélesség, magasság, háttérszín és pozíciót.

#animalt-teglalap {
  width:120px;
  height:60px;
  background:#242424;
  position:absolute;
}

Most jöjjön az érdekesebb része a fejlesztésnek: azaz az animáció elkészítése! CSS-ben írjuk be egyszerűen a @keyframes szavat (igen, kukaccal az elején!), majd utána nevezzük el az animációt, ebben az esetben animacionak. Most jöjjön a szokásos kapcsoszárójel, majd kezdjük az animálást!

@keyframes animacio { }

@-webkit-keyframes animacio { }

Itt meg kell adnunk, hogy az animáció egyes részein milyen tulajdonságai legyenek az adott divnek. Most egy mosgó téglalapot fogunk készíteni, ami többféle mozgást végez egyszerre: lefelé és jobbra/balra is el fog tolódni! Ehhez fel kell bontani az animációt néhány részre, én 10 részre osztottam fel, mert így 10 százalékos részek jönnek ki, könnyebben lehet dolgozni:

@keyframes animacio {
 0% { }
 
 10% { }
 
  20% { }
 
  40% { }
 
  50% { }
 
  60% { }
 
  70% { }
 
  80% { }
 
  90% { }
 
  100% { }
}

@-webkit-keyframes animacio {
 0% { }
 
 10% { }
 
  20% { }
 
  40% { }
 
  50% { }
 
  60% { }
 
  70% { }
 
  80% { }
 
  90% { }
 
  100% { }
}

Ezután már csak minden 10 százaléknál meg kell adni, hogy hol helyezkedjen el a divünk. Ez a feladat legunalmasabb része, de nem baj, mert a végeredmény nagyon jó lesz!

@keyframes animacio {
0% {
  top:10px;
  left:10px;
  }
 
 10% {
    top:100px;
    left:1000px;
  }
 
  20% {
    top:200px;
    left:10px;
  }
 
  40% {
    top:300px;
    left:1000px;
  }
 
  50% {
    top:400px;
    left:10px;
  }
 
  60% {
    top:500px;
    left:1000px;
  }
 
  70% {
    top:600px;
    left:10px;
  }
 
  80% {
    top:700px;
    left:1000px;
  }
 
  90% {
    top:800px;
    left:10px;
  }
 
  100% {
    top:900px;
    left:1000px;
  }
}

@-webkit-keyframes animacio {
0% {
  top:10px;
  left:10px;
  }
 
 10% {
    top:100px;
    left:1000px;
  }
 
  20% {
    top:200px;
    left:10px;
  }
 
  40% {
    top:300px;
    left:1000px;
  }
 
  50% {
    top:400px;
    left:10px;
  }
 
  60% {
    top:500px;
    left:1000px;
  }
 
  70% {
    top:600px;
    left:10px;
  }
 
  80% {
    top:700px;
    left:1000px;
  }
 
  90% {
    top:800px;
    left:10px;
  }
 
  100% {
    top:900px;
    left:1000px;
  }
}

Nem feledkezhetünk meg arról sem, hogy működésbe kell hozni! Menjünk vissza a CSS elejére majd adjuk hozzá az animációt is az alakzathoz:

#animalt-teglalap {
  width:120px;
  height:60px;
  background:#242424;
  position:absolute;
 
  animation-name: animacio;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: 1;    
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
 
  -webkit-animation-name: animacio;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;
}

A végeredmény megtekinthető itt!

Házi feladat: A codepen online szerkesztőjének segítségével készítsétek el az animációt, de bonyolítsatok is rajta: 10 százalékontként változzon a téglalap háttérszíne (background-color:#színkód;) is! Jó munkát mindenkinek! :)