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

CSS animáció

Dev

CSS animáció. Első hallásra furának tűnik, de egyáltalán nem az! Én Javascript helyett ezt szoktam használni - kisebb-nagyobb sikerrel -, és bizony rengeteg dolgot meg lehet oldani vele!

Első lépés: valahova írni kéne a dolgokat ugyebár. Ajánlom a legegyszerűbb szövegszerkesztőt, aNotepadot. Esetleg ha szereted az ennél is egyszerűbb megoldásokat, akkor létezik egy bizonyos online szerkesztő is. No, de mostmár térjünk a lényegre!

Mivel kezdőknek írom a tutorialt, a legegyszerűbb dolgokkal kezdjük, majd haladunk a nehezebb felé. Először készítsünk CSSben egy sötétszürke, 2 pixeles keretű fekete négyzetet - ezt fogjuk később megmozgatni az animáció segítségével.

#negyzet {
width: 200px;
height: 200px;
background: #242424;
border: 2px solid #000000;
}

Ezzel megvolnánk, most jöjjön egy kis HTML:

<div id="negyzet"></div> 

Idáig gondolom mindenki eljutott, viszont most jön a munka lényege, azaz az animáció elkészítése. Ehhez egy új dolgot kell megismernünk a CSSen belül: ez nem más, mint a@keyframes. Hűha, ez most mi lesz? Biztosan valami nagyon nehéz dolog… Nem. Egyáltalán nem mondanám nehéznek. Mi kell hozzá? Csupán az, hogy egy kicsit is ismerd a CSS-t. A lényege, hogy az animációt százalékokra bontjuk fel, méghozzá így:

@keyframes animacio {
0% {
width:200px;
height:200px;}
50% {
width:400px;
height:400px;
}
100% {
width:200px;
height:200px;
}
}

A @keyframes szó után megadjuk az animáció nevét, ami ez esetben egyszerűen "animacio". A kódban látható, hogy az animáció kezdetén a négyzetünk 200 pixel széles, 200 pixel magas, majd az animáció felénél már a duplájára nő, a végén pedig visszazsugorodik eredeti állapotába.

Mivel azt szeretnénk, ha minden böngészőben működne az animáció, optimalizálnunk kell, ez nem túl bonyolult dolog:

@keyframes animacio {
0% {
width:200px;
height:200px;}
50% {
width:400px;
height:400px;
}
100% {
width:200px;
height:200px;
}
}
@-webkitkeyframes animacio {
0% {
width:200px;
height:200px;}
50% {
width:400px;
height:400px;
}
100% {
width:200px;
height:200px;
}
}

Rossz hír következik: ez így még nem fog működni. :) De nyugalom, már nincs sok hátra, csak hozzá kell adnunk a négyzethez az animációnkat, mégpedig így:

#negyzet {
width:200px;
height:200px;
background:#242424;
border:2px solid #000000;
animation:animacio 4s;
-webkit-animation:animacio 4s;
}

Ezzel vége is lenne a tutorialnak, remélem hasznos dolgot taníthattam nektek. Ha kérdésetek van, esetleg valamit nem értetek, nyugodtan kérdezzetek!

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!