Ovaj članak prikazuje postupak dodavanja animacija i prijelaza u više koraka.
Kako koristiti animacije i prijelaze u više koraka?
Za izradu animacije u više koraka generira se niz ključnih kadrova. Određuje niz promjena koje će se primijeniti na odabrani HTML element. Svaki ključni kadar predstavlja drugačije stanje animacije, a preglednik glatko prelazi element između tih stanja. Tijekom prijelaza odredite glatku promjenu svojstava CSS-a tijekom određenog trajanja korisničkim interakcijama ili promjenama stanja.
Prođimo kroz praktičan primjer za bolje razumijevanje:
Primjer 1: Primjena animacije u više koraka
U ovom primjeru, animacija u više koraka primijenit će se na odabrani HTML element. Posjetite donju demonstraciju:
< stil >
.animationExample {
širina: 130px;
visina: 130px;
boja pozadine: šumsko zelena;
položaj: relativan;
animacija: moveAnimate 4s lagano in-out beskonačno;
}
< / stil >
< tijelo >
< div razreda = 'animationExample' >< / div >
< / tijelo >
U gornjem isječku koda:
- Prvo, klasa pod nazivom ' animationExample ” odabran je unutar „
” oznaka. - Zatim, vrijednosti ' 130 px ' dodijeljeni su ' visina ' i ' širina ' Svojstva.
- Osim toga, postavite ' šumskozelena ' i ' relativna ' kao vrijednost za ' boja pozadine ' i ' položaj ” svojstva za poboljšanje vizualizacije.
- Nakon toga upotrijebite ' animacija ” i postavite ga jednako na “ MoveAnimate 4s beskonačno lagano ulaženje ” za primjenu animacija.
- Vrijednost se sastoji od četiri dijela, prvi je animacija prilagođenog naziva, drugi je vrijeme trajanja koje treba dovršiti, treći je vrsta animacije, a četvrti je ograničenje koliko će se puta ova animacija primijeniti.
- Na kraju izradite HTML element i dodijelite ' animationExample ” razreda za to.
Sada upotrijebite ' ključne slike 'pravilo za definiranje običaja' premjestiAnimate ' animacija:
@ moveAnimate ključne slike {0 % {
lijevo: 0 ;
boja pozadine: plava;
}
pedeset % {
lijevo: 200px;
boja pozadine: šumsko zelena;
transformirati: rotirati ( 180 stupnjeva ) ;
}
100 % {
lijevo: 0 ;
boja pozadine: plava;
}
}
U gornjem bloku koda:
- Prvo, ' @ključni okviri ” stvara se blok zajedno s nazivom prilagođene animacije koja će se definirati.
- Zatim stvorite blok pod nazivom ' 0% ” koji primjenjuje CSS stilove na početku animacije. I iskoristite ' boja pozadine ' i ' lijevo ” CSS svojstva.
- Sada stvorite blok pod nazivom i ' pedeset% ” za stil usred animacije. Pruža vrijednosti ' 200 px ”, “ šumskozelena ' i ' zakreni (180 stupnjeva) ” na svojstva “lijevo”, “boja pozadine” i “transformacija”. Ovo omogućuje odabranom elementu da se okrene ulijevo za 200 piksela.
Nakon kompilacije gornjeg bloka koda:
Izlaz pokazuje da je animacija u više koraka primijenjena na odabrani HTML element.
Primjer 2: Primjena prijelaza u više koraka
Za primjenu prijelaza u više koraka mogu se koristiti CSS selektori zajedno s ' tranzicija ” vlasništvo. Posjetite donji kod:
.fade {
neprozirnost: 1;
prijelaz: neprozirnost 1s;
}
.fade:hover {
neprozirnost: 0;
}
<
/ stil>
<
tijelo>
< str razreda = 'uvenuti' > Zadržite pokazivač iznad mene da vidite prijelaz. < / str >
< / tijelo >
Objašnjenje gornjeg koda:
- Prvo, običaj “ uvenuti ” je odabrana klasa i vrijednost 1 je dana u “ neprozirnost ” vlasništvo. Također, postavite vrijednost ' neprozirnost 1s ' prema ' tranzicija ” CSS svojstvo. Ovo postavlja ili uklanja neprozirnost u vremenskom trajanju od ' 1s ”.
- Zatim, ' :lebdjeti ' selektor je dodijeljen ' uvenuti ” razred. U njemu je vrijednost ' 0 ” postavljeno je na svojstvo neprozirnosti.
- Na kraju se HTML element kreira unutar '
' oznaku i klasu ' uvenuti ” nalazi se u prilogu.
Nakon završetka faze kompilacije, web stranica izgleda ovako:
GIF prikazuje da je prilagođeni fade prijelaz primijenjen na odabrani HTML element.
Zaključak
Animacije i prijelazi u više koraka oživljavaju HTML web stranice dodavanjem pokreta i vizualnih efekata. Za animaciju, ' ključne slike ' koriste se zajedno s postotkom trajanja kao što je ' 0% 'je početak,' pedeset% ” je sredina, a “ 100% ” je kraj trajanja animacije. Za prijelaz, CSS selektor može se koristiti zajedno s ' tranzicija ” razred. Ovaj je članak pokazao postupak korištenja animacija i prijelaza u više koraka.