Glatka animacija objekata samo sa CSS-om (5 primjera).

i to je to! Da vidimo kako to izgleda u stvarnosti.

Prvo, HTML oznake. Vrlo je jednostavno jer radimo samo s jednim elementom na stranici.

1	<div class="toSmallWidth">

A evo šta je u datoteci stila:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth ( margina : 20px auto ; /* gornje i donje margine od 20px i poravnanje po sredini */ pozadina: crvena /*crvena pozadina za blok*/ visina : 100px ; /*visina bloka 100px*/širina: 800px /*početna širina 800px*/-webkit-ime-animacije: animWidthSitehere; -webkit-animation-duration : 5s; /* svojstvo s prefiksom za preglednike Chrome, Safari, Opera */ animation-name : animWidthSitehere; /* specificirajte naziv ključnih kadrova (nalazi se ispod) */ trajanje animacije: 5s /*postavi trajanje animacije*/ } /* ključni okviri s prefiksom za preglednike Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere( od ( širina : 800px ; ) do ( širina : 100px ; )) @keyframes animWidthSitehere( od ( širina : 800px ; ) /*prvi ključni kadar gdje je širina bloka 800px*/ do ( širina : 100px ; ) /*zadnji ključni kadar gdje je širina bloka 100px*/ }

Kao što vidite, specificirali smo samo prvi i posljednji ključni kadar, a svi srednji su "izgrađeni" automatski.

Evo vaše prve CSS3 animacije. Da biste konsolidirali stečeno znanje, kreirajte HTML dokument i CSS datoteku i tamo umetnite (ili bolje ukucajte ručno) kod iz primjera. Tada ćete sigurno sve razumjeti. Zatim pokušajte učiniti isto s visinom bloka (trebalo bi se smanjiti u visinu) da biste usidrili materijal.

3. Napredniji primjeri CSS3 animacije

Iznad ste naučili kako je lako kreirati CSS3 animacije. Ako ste pokušali sami to učiniti, već ste razumjeli cijeli proces i sada želite znati kako možete stvoriti složeniju i ljepšu animaciju. I zaista se može stvoriti. U nastavku se nalaze 3 lekcije u kojima se animacija kreira na isti način kao u gornjem primjeru.

3 lekcije CSS animacije (transformacije)

Lekcije će vam pomoći da još bolje razumijete CSS animaciju. Glavna stvar je da pokušate ponoviti ono što vidite na lekcijama. Ili barem pokušajte promijeniti vrijednosti svojstava i vidjeti što će se dogoditi, tada ćete se manje bojati CSS-a.

Nedavno smo to vidjeli tranzicije- To je samo način animacije svojstva stila iz početni prije final države.

Dakle, tranzicije u CSS-u su specifično vrsta animacije, gdje:

• postoje samo dva stanja: početak i kraj;
• animacija nije u petlji;
• međustanja kontroliše samo funkcija vremena.

Ali šta ako želite:

• imati kontrolu nad srednji države?
• petlja animacija?
• napraviti različite vrste animacija za jedan element?
• animirati samo određeno svojstvo na pola način?
• imitirati razne vremenske funkcije za različite nekretnine?

Animacija u CSS-u dozvoljava sve ovo i više.

Animacija je poput mini filma u kojem vi kao režiser dajete uputstva (pravila stila) svojim glumcima (HTML elementi) za različite scene (ključne kadrove).

Animation Properties

Kao i tranzicija, svojstvo animacije je skraćeno za nekoliko drugih:

• animation-name : naziv animacije;
• animation-duration : koliko dugo animacija traje;
• animation-timing-function: kako se izračunavaju međustanja;
• animation-delay : animacija počinje nakon nekog vremena;
• animation-iteration-count : koliko puta bi se animacija trebala pokrenuti;
• animation-direction : treba li kretanje ići u suprotnom smjeru ili ne;
• animation-fill-mode : koji se stilovi primjenjuju prije početka animacije i nakon njenog završetka.

Brzi primjer

Da biste animirali dugme za preuzimanje, možete napisati animaciju poskakivanje:

@keyframes odskakanje( 0% ( dno: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% (dole: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ) ) .dugme za učitavanje (animacija: odskakivanje 0,5s kubični-bezier(0.1,0.25,0.1,1) 0s beskonačno naizmjenično oba; )

Prvo moramo napisati stvarnu animaciju odbijanja koristeći @keyframes i imenovati je .

koristio sam skraćeno svojstvo animacije i uključuje sve moguće opcije:

• animation-name: odskakanje (isto kao ime ključnog kadra)
• trajanje animacije: 0,5 s (pola sekunde)
• animacija-vremenska-funkcija: cubic-bezier(0.1,0.25,0.1,1)
• kašnjenje animacije: 0s (bez kašnjenja)
• animation-iteration-count: beskonačno
• smjer animacije: naizmjenični (ide naprijed-nazad)
• animation-fill-mode: oba

@keyframes

Prije primjene animacije na HTML elemente, potrebno je pisati animaciju koristeći ključne kadrove. Općenito, ključni okviri su svaki međukorak u animaciji. Definiraju se korištenjem postotaka:

• 0% - prvi korak animacije;
• 50% - korak na pola puta u animaciji;
• 100% je posljednji korak.

Također možete koristiti ključne riječi od i do umjesto 0% odnosno 100%.

Možete definirati onoliko ključnih kadrova koliko želite, na primjer 33%, 4% ili čak 29,86%. U praksi ćete napisati samo neke od njih.

Svaki ključni kadar je css pravilo, što znači da možete pisati CSS svojstva kao i obično.

Da biste definirali animaciju, jednostavno napišite ključnu riječ @keyframes uz nju ime:

@ključni okviri oko (0% (lijevo: 0; gore: 0; ) 25% (lijevo: 240px; gore: 0; ) 50% (lijevo: 240px; gore: 140px; ) 75% (lijevo: 0; gore: 140px ; ) 100% (lijevo: 0; gore: 0; ) ) p (animacija: oko 4s linearno beskonačno; )

Imajte na umu da početni 0% i kraj 100% sadrže ista pravila CSS. Ovo osigurava da se animacija savršeno vrti. Pošto je brojač iteracija postavljen na beskonačno, animacija će ići od 0% do 100%, a zatim odmah nazad do 0% i tako u nedogled.

naziv-animacije

Ime animacija se koristi barem dvaput:

• at pisanje animacije sa @keframes ;
• at koristiti animacije koristeći svojstvo ime-animacije (ili preko svojstva stenografije animacije).

@keyframes bilo šta ( /* ... */ ) .selektor (ime-animacije: bilo šta; )

Poput imena CSS klasa, imena animacija mogu uključivati ​​samo:

• slova (a-z);
• brojevi (0-9);
• donja crta (_);
• crtica (-).

Ime ne može početi brojem ili dvije crtice.

trajanje animacije

Kao i trajanje prijelaza, trajanje animacije se može postaviti na sekundi(1s) ili milisekundi(200ms).

Selektor (trajanje animacije: 0,5s; )

Zadana vrijednost je 0s što znači da uopće nema animacije.

funkcija vremena animacije

Slično funkcijama za mjerenje vremena za prijelaze, mogu se koristiti funkcije mjerenja vremena za animaciju ključne riječi, kao što je linear , ease-out , ili se može definirati sa proizvoljnim bezierove krive.

Selektor (funkcija mjerenja vremena animacije: jednostavno ulazak; )

Zadana vrijednost: lakoća .

Pošto animacija u CSS-u koristi ključne kadrove, možete postaviti linearno vremenska funkcija i simulirati specifičnu Bezierovu krivu definiranjem mnoge vrlo specifične ključni okviri. Pogledajte Bounce.js za vrhunske animacije.

animacija-kašnjenje

Kao i kod kašnjenja prijelaza, kašnjenje animacije se može postaviti na sekundi(1s) ili milisekundi(200ms).

Zadana vrijednost je 0s što znači da nema nikakvog kašnjenja.

Korisno kada uključujete više animacija serija.

A, .b, .c (animacija: odskakanje 1s; ) .b (kašnjenje animacije: 0,25s; ) .c (kašnjenje animacije: 0,5s; )

broj iteracija animacije

Podrazumevano se reprodukuje samo animacija jednom(vrijednost 1). Možete postaviti tri vrste vrijednosti:

• cijeli brojevi poput 2 ili 3;
• razlomke, poput 0,5, koji će reproducirati samo polovinu animacije;
• beskonačna ključna riječ, koja će ponavljati animaciju beskonačno.

.selektor (broj-animacija-iteracija: beskonačan; )

smjer animacije

Svojstvo smjera animacije definira kojim redosledom ključni kadrovi se čitaju.

• normalno : počinje sa 0%, završava sa 100%, počinje sa 0% ponovo.
• obrnuto: počinje sa 100%, završava sa 0%, počinje sa 100% ponovo.
• alternativna : počinje sa 0%, ide do 100%, vraća se na 0%.
• alternate-reverse : počinje na 100%, ide na 0%, vraća se na 100%.

Ovo je lakše zamisliti ako je brojač iteracija animacije postavljen na beskonačno.

animacija-fill-mode

Svojstvo animation-fill-mode određuje šta će se dogoditi front početak animacije i poslije njegov završetak.

Prilikom utvrđivanja ključno osoblje možete odrediti css pravila, koji će se primjenjivati ​​u različitim koracima animacije. Sada ova CSS pravila mogu lice sa onima koji već primijenjen na animirane elemente.

animation-fill-mode vam omogućava da kažete pretraživaču da li stilovi animacije takođe treba primijeniti izvan animacije.

Hajde da zamislimo dugme, koji je:

• crvena default;
• postaje plava na početku animacije;
• i na kraju zeleno kada je animacija završena.

Pozdrav dragi čitaoci. Ovog dana, hajde da pričamo o prilično zanimljivoj stvari kao što je CSS animacija. Odnosno, ova animacija elemenata se radi samo uz pomoć stilova i ovdje se ne koriste skripte.

Kao što vidite, ovdje postoji atribut :hover, koji mijenja stil pozadine pri lebdenju, u nekim primjerima bi trebao biti obavezan.

Glatko promijenite boju elementa pri lebdenju pomoću prijelaza

#kutija1 (
margin-bottom: 5px;
boja pozadine: #ccc;

padding: 10px
text-align: centar;
širina: 200px
visina:100px;

uvlaka teksta: 0px;
granica: 1px čvrsta #888;
-moz-transition: boja pozadine 0.8s 0.1s lakoća;
-o-transition: boja pozadine 0,8s 0,1s lakoća;
-webkit-transition: boja pozadine 0.8s 0.1s lakoća;
kursor: pokazivač;)

#box1 :hover {
boja pozadine: #97CE68;
boja: #333;
}

Kao što vidite, takvu animaciju smo postigli koristeći atribut tranzicija. Ovdje možete promijeniti brzinu animacije u sekundama, u ovom slučaju potrebno je 0,8s dok se boja potpuno ne promijeni pri lebdenju i 0,1s prije nego što se animacija pokrene nakon lebdenja i uklanjanja kursora. (Izvinite zbog zagonetke :-)) Ova vrijednost se može promijeniti po potrebi.

Boja pozadine pri lebdenju je postavljena atributom :hover, ovdje je obavezno, inače animacija neće raditi.

Promjena veličine elementa

#kutija2 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: #333;

padding: 10px
text-align: centar;
širina: 200px
visina:100px;

uvlaka teksta: 0px;
granica: 1px čvrsta #888;
-moz-transition: sve 1s linearne;
-o-prijelaz: sve 1s linearne;
-webkit-transition: sve 1s linearne;
kursor: pokazivač;)

#box2 :hover {
boja pozadine: #97CE68;
boja: #000;
širina: 150px
visina:50px;
}

U ovom primjeru, postigli smo glatku promjenu veličine bloka pri lebdenju. Zadana vrijednost je 200 x 100, a vrijednost lebdenja je 150 x 50, što je postavljeno atributom :hover.

Ovdje također možete promijeniti blok samo po širini ili visini, samo trebate :hover izbrisati širina:- blok se mijenja samo po visini, visina:— blok se mijenja samo po širini.

Također možete promijeniti stopu promjene. U ovom slučaju to je 1s.

Object twist

#box3 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: #333;

padding: 10px
text-align: centar;
širina: 200px
visina:100px;

uvlaka teksta: 0px;
granica: 1px čvrsta #888;
-moz-transition: sve 1s 0.1s ease-in;
-o-transition: sve 1s 0,1s ease-in;
-webkit-transition: sve 1s 0.1s jednostavnost;
kursor: pokazivač;)

#box3:hover(
boja pozadine: #97CE68;
boja: #000;
-webkit-transform: rotirati (360 stepeni);
-moz-transform: rotirati (360 stepeni);
-o-transform: rotirati (360 stepeni);
}

Zaokret je gotov sa transformirati I tranzicija. U ovom slučaju, objekt se okreće u smjeru kazaljke na satu za 360 stupnjeva brzinom od jedne sekunde. Ako želite da se blok okreće suprotno od kazaljke na satu, transformirati vrijednost mora biti postavljena na - (minus). Naravno, stepen prometa se može mijenjati.

Glatko zumiranje i udaljavanje objekta

#box4 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: #333;
padding: 10px
text-align: centar;
širina: 200px
visina:100px;

uvlaka teksta: 0px;
granica: 1px čvrsta #888;
-moz-transition: sve 3s ease-out;
-o-transition: sve 3s ease-out;
-webkit-transition: sve 3s ease-out;
kursor: pokazivač;)

#box4:hover(
boja pozadine: #97CE68;
boja: #000;
-webkit-transform: skala(2);
-moz-transform:scale(2);
-o-transform:skala(2);
}

U ovom primjeru, blok se glatko povećava za 2 puta. Ova vrijednost je postavljena transform:scale(2). Ako postavite vrijednost na 1,5, blok će se povećati za 1,5 puta.

Na isti način možete smanjiti veličinu blok, na primjer, postavite vrijednost na 0,5.

Glatko pomicanje bloka prema dolje

#box5 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: #333;
padding: 10px
text-align: centar;
širina: 200px
visina:100px;

uvlaka teksta: 0px;
granica: 1px čvrsta #888;
-moz-transition: sve 1s jednostavnost-in-out;
-o-transition: sve 1s jednostavnost-in-out;
-webkit-transition: sve 1s jednostavnost ulaska;
kursor: pokazivač;)

#box5:lebdi (
boja pozadine: #97CE68;
boja: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0.50px);
-o-transform: translate(0,50px);
}

Ovdje je pomak dat u pikselima. U ovom slučaju (0,50px). Također možete natjerati blok da se podigne sa ovom vrijednošću od 0,-50px. Ili dijagonalno dolje 50px,50px. Jednom riječju, blok se može pomaknuti bilo gdje.

To je u suštini sve što sam htio reći. Ne, ne sve :-) Zaboravio sam da vas podsetim da se ova CSS animacija može primeniti na sve objekte na sajtu: slike, tekst, naslove, ikone itd. Za linkove, glatka promjena boje je savršena, po mom mišljenju je jako lijepa. :-)

Pa ipak, ovu informaciju s nama je podijelila stranica shpargalkablog.ru. Na čemu mu veliko hvala.

To je sada sve sigurno :-) Vidimo se uskoro, prijatelji.

Zdravo. Nedavno sam naišao na niz vrlo korisnih i zanimljivih video tutorijala na temu " CSS animacija". Ali to je loša sreća, svi video snimci su bili na engleskom i, vjerovatno, svaki dizajner izgleda ne zna engleski na dovoljnom nivou da bi razumio i asimilirao sve potrebne informacije. Stoga sam odlučio da vam prevedem ove lekcije (tačnije, da napravim besplatan prijevod). Nema potrebe za zahvaljivanjem. dakle:

1. CSS animacija. Uvod + prijelazno svojstvo(Ovaj članak)
2. CSS animacija. Ključni okviri - uskoro
3. Kada i zašto koristiti CSS animacije? - uskoro dolazi

Šta je CSS animacija?

Prije nego što vam kažem kako napraviti CSS animacije i zašto su uopće potrebne, htio bih početi tako što bih vam objasnio, šta se desiloCSS animacija, definisati nešto.

Animacije na webu imaju dvije glavne ideje. Prva ideja je oživiti nešto. Ti si kao dr Frankenštajn. Imate beživotno čudovište i udahnete mu život. Sekunda - vizualizacija pokreta. A ključna riječ ovdje je "pokret".

Kako animirati?

Postoje dva glavna alata u CSS-u pomoću kojih možemo premještati elemente po web stranici. Prva (o kojoj ćemo danas govoriti) je imovina tranzicija. Prije svega, uz njegovu pomoć kreiramo animacije u CSS-u. Drugi alat je vlasništvo animacija uparena s ključnim kadrovima(@keyframes - ključni kadrovi). Ovaj alat ćemo detaljnije pokriti u sljedećem tutorijalu, ali sada ćemo pogledati svojstvo tranzicije CSS-a. A onda ćemo pričati šta animirati na stranici (kada korisniku treba), a šta ne (kada animacija izgleda glupo i neprikladno), na osnovu korisničkog iskustva (UX - korisničko iskustvo).

CSS svojstva prijelaza - opcije i vrijednosti

Sintaksa

Prvo, da vidimo kako se ovo svojstvo čita i razumijemo njegovu sintaksu. Ovu nekretninu pišemo ovako:

tranzicija: [imovine] [trajanje] [funkcija mjerenja vremena] [kašnjenje] ;

tranzicija: visina 1s ease-out 0.2s ;

Ovo svojstvo dodjeljujemo elementu koji želimo animirati. Ova stavka postaje glatka tranzicija(ili korak) između nekoliko njegovih stanja (npr. visina 100px i visina 200px). I kako će ovaj izgledati tranzicija(sa engleskog prijelaza), ovisit će o parametrima koje smo za njega postavili.

Prvi parametar (vrijednost) svojstva prijelaza je drugi imovine element koji se animira (na primjer, visina).

Drugi parametar je trajanje (trajanje) animacije, odnosno koliko će vremena biti potrebno da element prijeđe iz jednog stanja u drugo (na primjer, 2s ili 2000ms).

Treći parametar je funkcija mjerenja vremena [tajmingfunkcija] (funkcija ublažavanja [ popuštanjefunkcija]). Kako je intenzitet animacije raspoređen tokom vremena. Na primjer, animacija može početi naglo, zatim usporiti i glatko završiti prijelaz na kraju. Može se koristiti kao ključne riječi (npr. lakoća,lakoća-u-van,linearno) i funkcije Bezierove kocke (na primjer, kubni-bezier(0,17, 0,67, 0,83, 0,67)). Možete jednostavno i praktično postaviti Bezierovu kocku na ovom resursu http://cubic-bezier.com , kao i funkciju koraka kako biste kreirali animaciju okvir po kadar (korak po korak).

I na kraju, parametar kašnjenje. Kašnjenje animacije je vrijeme potrebno za čekanje prije nego što animacija (u našem slučaju, prijelaz) počne.

Primjer animacije CSS prijelaza

Pogledajmo ovaj primjer CSS animacije:

tranzicija: neprozirnost 300ms lakoća ulaska 1s;

Ovdje animiramo samo imovinu neprozirnost(prozirnost). To znači da ako element koji ćemo animirati ima druga svojstva, kao što su visina, širina ili boja, pa čak i ako se ta svojstva razlikuju u različitim stanjima elementa, tada će samo svojstvo neprozirnosti imati glatki prijelaz (animacija) . Da li razumiješ?

Umjesto određene imovine, možete koristiti i ključnu riječ " sve". To znači da animiramo apsolutno sva svojstva elementa koja su promijenjena u novom stanju elementa (ne samo neprozirnost), a koja se uopće mogu animirati. Jer, kao što znate, ne mogu se sva svojstva animirati. Ali više o tome kasnije.

Drugi parametar ( 300 gospođa) nam govori da će animacija trajati samo 300 milisekundi. To jest, element će se brzo pojaviti ili brzo otopiti, ovisno o vrijednostima svojstava u svoja dva stanja.

Funkcija mjerenja vremena ( lakoća-u-van) kao treći parametar će olakšati početak i kraj animacije.

Kašnjenje ( 1 s) označava koliko animacija mora kasniti prije nego što se pokrene.

Općenito, ovo je formula kako ćemo snimiti animaciju prijelaza. Ovo je sintaksa. Možete, ako ništa drugo, dodati više od jednog prijelaza [osobina] za jedan element. Na primjer, možete animirati promjene u visini i širini elementa s različitim parametrima. Da biste to učinili, u svojstvu tranzicije, umjesto tačke zarez na kraju, samo stavite zarez i upišite parametre za još jedno svojstvo. I ne zaboravite staviti tačku i zarez na kraju nakon toga da bi to funkcioniralo.

Šta se može animirati u CSS-u?

Do sada smo raspravljali samo o sintaksi svojstva tranzicije. Hajde sada da razgovaramo o svojstvima koja možemo animirati, a koja ne. Jer postoje neke stvari koje jednostavno nema smisla animirati, a neka svojstva jednostavno ne mogu biti animirana.

Animated Properties

Uzmimo, na primjer, svojstva kao što su:

1. veličina slova;
2. boja pozadine;
3. širina;
4. lijevo (koliko od lijeve strane element može biti pomjeren [pozicioniran]...

Očigledno, ima smisla animirati ova svojstva. Ako promijenite njihove vrijednosti, to će vizualno promijeniti element. Ako promijenite veličinu fonta sa, recimo, 14px na 28px, vidjet ćete da font raste glatko i postoji animacija koja traje neko vrijeme. Animacija uvijek ima smisla ako je vrijednost svojstava jasna (najčešće numerička) vrijednost. Ako povećate veličinu fonta na 100px, jasno ćete vidjeti kako slova rastu. Također se može primijetiti glatka promjena boje pozadine [jer boja na webu ima numerički kod, na primjer, crvena rgb(255,0,0)]. Ova svojstva su animirana.

Općenito, zapamtite, ako zamislite da je animirano, onda se može animirati. Većinu vremena ovo funkcionira.

Svojstva koja nisu animirana

A evo i liste svojstava koja se ne mogu animirati (primjer):

1. display;
2. font-family;
3. pozicija...

Ovo je nekoliko koje sam uzeo kao primjer kako biste mogli osjetiti razliku između animiranih i neanimiranih CSS svojstava.

Uzmi prikaz. Možete li zamisliti kako se mijenja između " prikaz:blok;" i " prikaz:U redu-blok;"? Kako se izgled elementa može glatko mijenjati između " pozicija:relativna;" i " pozicija:apsolutni;"? Ne, naravno da će element izgledati drugačije kada se ova svojstva promijene. Ali kako možete zamisliti tranzicija? Ne možete to učiniti. zar ne? Ne možete zamisliti da se font okreće Helvetica u fontu Georgia, svako slovo, jednostavno neće raditi. Možete promijeniti ove fontove, ali će se oni naglo promijeniti, neće biti animacije.

Performanse animacije u CSS-u

Općenito, mnoga svojstva animiraju, ali neka ne. Sada ćemo odlučiti koja su animirana svojstva bolja za animaciju, a koja lošija. Radi se o performansama. Dotaknuli smo se teme performansi jer su animacije intenzivne resurse.

Općenito, evo stvari koje su najprikladnije za animaciju:

1. Pozicioniranje na stranici
2. Skaliranje
3. Rotacija
4. Transparentnost

Štaviše, prve tri stavke ove liste su svi parametri svojstva transformacije (translate, scale, rotate). Pozicioniranje se vrši duž X i Y osi.

Ako odlučite da animirate bilo šta drugo, rizikujete da nećete dobiti glatku, glatku tranziciju od 60 fps. Paul Lewis & Irish

A to je upravo ono što nas zanima kada govorimo o performansama animacije. Općenito, najprikladnija svojstva za animaciju su transformisati ineprozirnost. Kada animirate bilo šta drugo, fps animacije može pasti znatno ispod 60fps.

Sumirajmo ovu tačku na sljedeći način. Pokušajte izbjeći ponovno crtanje elemenata na web stranici i animiranje elemenata koje je pretraživaču teško prikazati (kao što su sjene).

Kako napraviti animaciju u CSS-u?

Sada ćemo shvatiti kako pokrenuti animaciju. Šta treba učiniti da bi element animirao. Drugim riječima, kako napraviti animacijucss.

Nije teško i postoji mnogo različitih načina da se to uradi. Ali postoje 2 glavna koje morate bez greške savladati. Prvi način je element lebdeće animacije(pseudo-klasa:hover). Zadržite pokazivač iznad elementa i animacija se aktivira. Na ovaj način možete animirati sam element ili bilo koji od njegovih podređenih elemenata. Onda ću vam pokazati kako to funkcionira. Drugi način je promjena klase elementa. To jest, imate običan element, mijenjate (ili dodajete) njegovu klasu u klasu koja ima potpuno različite stilove. Ako dodate klasu, animacija će se dogoditi, a ako uklonite klasu, animacija će se obrnuti. Ovo je dobar način za animiranje menija ili padajućih menija.

Pogovor

Pokrili smo sve što nam je potrebno za kreiranje čistih CSS animacija. Vrlo brzo ćemo analizirati praktične primjere, a nešto kasnije - vrlo zanimljive primjere.

Jeste li pročitali do samog kraja?

Je li ovaj članak bio od pomoći?

Ne baš

Šta ti se tačno nije svidelo? Da li je članak bio nepotpun ili neistinit?
Pišite u komentarima i obećavamo da ćemo se poboljšati!