CSS animációk, ahogyan csak szeretnéd

Szerző: Bundi 2015.12.06. Kreatív 0 Hozzászólás

Weboldalak jelentős része használ valamilyen animációt. A legjellemzőbb a sliderekben használt, úgynevezett preloader animációk, de népszerűek a menü elemek, vagy logo megjelenítésének animálása is. Ezekhez az animációkhoz használhatunk valamilyen JavaScript alapú keretrendszert, vagy kihasználhatjuk a CSS 3-ban rejlő lehetőségeket. A CSS 3-ról viszonylag kevés szó esik, pedig agyon látványos animációk állíthatóak elő a segítségükkel, JavaScript bevonása nélkül is. Nem mellékesen az erre a célra készült JavaScript függvények tulajdonképpen szintén CSS-t ágyaznak be a forráskódunkba, az animációk megvalósításához.

Vegyünk egy nagyon egyszerű példát arra, hogy mit érhetünk el pusztán CSS-el:

CSS


#animation {
	width: 100px;
	height: 100px;
	background-color: #0088cc;
	position: relative;
	/* Chrome, Safari, Opera */
	-webkit-animation-name: my_animation; //Az animáció referencia neve, amivel hivatkozni lehet magára az animációt végző kódra
	-webkit-animation-duration: 5s; //Az animáció időtartama másodpercben
	-webkit-animation-timing-function: linear; //Az animáció időtartamának beosztása
	-webkit-animation-delay: 0s; //Az animáció elkezdésének időzítése másodpercben
	-webkit-animation-iteration-count: infinite; //Ismétlődés engedélyezése, alkalmak száma is megadható
	-webkit-animation-direction: alternate; //Az animációt képkockáinak időzítése
	/* Hagyományos szintaxis */
	animation-name: my_animation;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes my_animation {
	0%   {background-color: #0088cc; left: 0px; top: 0px;}
	25%  {background-color: #ed9c28; left: 200px; top: 0px;}
	50%  {background-color: #0088cc; left: 200px; top: 200px;}
	75%  {background-color: #ed9c28; left: 0px; top: 200px;}
	100% {background-color: #0088cc; left: 0px; top: 0px;}
}

/* Hagyományos szintaxis */
@keyframes my_animation {
	0%   {background-color: #0088cc; left: 0px; top: 0px;}
	25%  {background-color: #ed9c28; left: 200px; top: 0px;}
	50%  {background-color: #0088cc; left: 200px; top: 200px;}
	75%  {background-color: #ed9c28; left: 0px; top: 200px;}
	100% {background-color: #0088cc; left: 0px; top: 0px;}
}

HTML


<div id="animation"></div>

Természetesen az animációt a végtelenségig alakíthatjuk különböző CSS utasításokkal, de a szemléltetéshez talán most ennyi is elég. A színezés és mozgatáson túl persze vannak sokkal érdekesebb lehetőségek is, mint például a különböző transzformációk kezelése. A következő példában mindezt egy "hover" eseménnyel egybekötve mutatom be. Tehát az animáció akkor fog elindulni, ha az egeret az objektumunk fölé visszük.

CSS


#animation {
    width: 100px;
    height: 100px;
    background-color: #0088cc;
	/* Chrome, Safari, Opera */
    -webkit-transition: width 2s, height 2s, -webkit-transform 3s; //A szélesség és a magasság 2 másodperc alatt alakul át, illetve az elforgatás pedig 3 másodperc alatt zajlik le. Ezeket a részleteket ilyen módon egyedien is be lehet időzíteni.
	/* Hagyományos szintaxis */
    transition: width 2s, height 2s, transform 3s;
}

#animation:hover {
    width: 200px;
    height: 200px;
	/* Chrome, Safari, Opera */
    -webkit-transform: rotate(180deg); //Elforgatás 180 fokos szögben
	/* Hagyományos szintaxis */
    transform: rotate(180deg);
}

HTML


<div id="animation"></div>

Tehát most már létre tudunk hozni animációkat és transzformációkat CSS segítségével, mindezt akár hover eseményre is. Vegyünk még egy egyszerű példát minderre, amiben az animáció egyes képkockáit most más módon időzítjük be. Ha az egeret a kék négyzet fölé visszük, akkor látszik, hogy előbb megváltozik a négyzet színe és áttetszősége, majd amikor ez már megtörtént csak utána változik meg a négyzet sarkainak lekerekítése.

CSS


#animation {
    width: 100px;
    height: 100px;
    background-color: #0088cc;
	border-radius: 0px;
	opacity: 1;
	/* Chrome, Safari, Opera */
    -webkit-transition: background-color 1s linear 0s, opacity 1s linear 0s, -webkit-border-radius 1s linear 1s;
	/* Hagyományos szintaxis */
    transition: background-color 1s linear 0s, opacity 1s linear 0s, border-radius 1s linear 1s;
}

#animation:hover {
    background-color: #ed9c28;
	/* Chrome, Safari, Opera */
	-webkit-border-radius: 8px;
	/* Hagyományos szintaxis */
    border-radius: 8px;
	opacity: 0.75;
}

HTML


<div id="animation"></div>

Van könnyebb út?

Természetesen van! Nem kell magunknak legyártani az összes elképzelhető animációt, hiszen már nagyon sok CSS alapú keretrendszer létezik erre a célra. A fenti példákat azért mutattam be, hogy tisztában legyél az animáció készítés alaplépéseivel.

A 3 legnépszerűbb CSS animáció gyűjtemény

Ha a felsorolt kész megoldások nem adnak megoldást egy egyedi igényekre szabott animáció elkésztéséhez, akkor pedig az alábbi 2 referencia oldalt javaslom, mely még részletesebben foglalkozik a témával.

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.