Értesítés, hogy le ne maradj semmiről! Iratkozz fel és értesülj azonnal a legfrisebb tartalmakról! Nálunk te döntöd el, miről kérsz értesítést! Feliratkozok Többet szeretnék megtudni
Dev

CSS animáció

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 Hobbi web-designer, kezdő 3D modellező, LEGO őrült.
Hozzászólások -
Vendég profilképe Vendég
{{comment.dateWrite}} Válasz
Válasz {{answer.dateWrite}}