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!
Hozzászólások
-