1. Főoldal
  2. Cikkek
  3. Dev
  4. CSS animáció

CSS animáció

Dev

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;
}

animation-name: animacio; - az animáció neve (ez esetben animacio)
animation-duration: 10s; - animáció hossza (másodpercben megadva)
animation-timing-function: ease; - megutatja, hogy egy ciklusban (itt 10 másodperc) hogyan megy végbe az animáció
animation-iteration-count: 1; - animáció ismétlésének száma
animation-delay: 0; - megmutatja, hogy mikor induljon az animáció (alapértelmezett: 0)
animation-play-state: running; - megmutatja, hogy az animáció megy, vagy áll
animation-fill-mode: forwards; - az animáció leállítására szolgál. Az animált box nem fog visszaugrani eredeti helyére, hanem megtartja az animáció végén levő helyét.

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! :)

kovjonas profilképe
Kovács Jónás @kovjonas +86 Hobbi web-designer, kezdő 3D modellező, LEGO őrült.
0 hozzászólás
Hozzászóláshoz jelentkezz be vagy Regisztrálj!