Glatka animacija objekata koristeći samo CSS (5 primjera).

i to je to! Pogledajmo kako to izgleda u stvarnosti.

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

1	<div class = "toSmallWidth" >

A evo što 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 automatski; /*vanjske margine na vrhu i dnu od 20px i poravnanje u sredini*/ pozadina:crvena; /*crvena pozadina bloka*/ visina: 100px; /*visina bloka 100px*/širina: 800px; /*početna širina 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* svojstvo s prefiksom za preglednike Chrome, Safari, Opera */ ime-animacije : animWidthSitehere; /* navedite naziv ključnih okvira (nalaze se ispod)*/ animacija-trajanje: 5s; /*postavljanje trajanja animacije*/ } /* ključni okviri s prefiksom za preglednike Chrome, Safari, Opera */ @-webkit-keyframes animWidthSiteovdje ( od (širina: 800px;) do (širina: 100px;)) @keyframes animWidthSiteovdje ( od (širina: 800px;) /*prvi ključni kadar gdje je širina bloka 800px*/ do (širina: 100 px;) /*zadnji ključni kadar, gdje je širina bloka 100px*/ }

Kao što možete vidjeti, naveli smo samo prvi i zadnji ključni okvir, a svi srednji su automatski "izgrađeni".

Vaša prva CSS3 animacija je spremna. Kako biste učvrstili stečeno znanje, izradite HTML dokument i CSS datoteku te umetnite (ili još bolje upišite rukom) kod iz primjera. Tada ćete sigurno sve razumjeti. Zatim pokušajte isto s visinom bloka (trebao bi se smanjiti u visini) kako biste osigurali materijal.

3. Složeniji primjeri CSS3 animacija

Gore ste naučili kako jednostavno izraditi CSS3 animaciju. Ako ste to pokušali napraviti vlastitim rukama, već ste razumjeli cijeli proces i sada želite saznati kako možete stvoriti složeniju i ljepšu animaciju. I doista se može stvoriti. Ispod se nalaze 3 lekcije u kojima se animacija stvara na isti način kao u gornjem primjeru.

3 lekcije o CSS animaciji (transformacije)

Lekcije će vam pomoći da još bolje razumijete CSS animaciju. Glavna stvar je pokušati ponoviti ono što vidite u 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 prijelazi- to je samo način animacije svojstva stila iz izvornik prije konačni stanje.

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

• postoje samo dva stanja: početak i kraj;
• animacija se ne ponavlja;
• međustanja su kontrolirana samo vremenskom funkcijom.

Ali što ako želite:

• imati kontrolu nad srednji Države?
• petlja animacija?
• napraviti različite vrste animacija za jedan element?
• animirati određeno svojstvo samo na pola načine?
• oponašati razne funkcije vremena za različita svojstva?

Animacija u CSS-u omogućuje vam sve to i više.

Animacija je poput mini-filma u kojem vi, kao redatelj, dajete upute (pravila stila) svojim glumcima (HTML elementi) za različite scene (ključne kadrove).

Svojstva animacije

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

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

Brzi primjer

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

@keyframes bouncing( 0% ( bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ) .loading-button ( animacija: poskakivanje 0,5s cubic-bezier(0.1,0.25,0.1,1) 0s beskonačno naizmjenično oboje; )

Najprije trebate napisati stvarnu animaciju poskakivanja koristeći @keyframes i nazvati je.

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

• naziv-animacije: poskakivanje (isto kao naziv ključne slike)
• trajanje animacije: 0,5 s (pola sekunde)
• funkcija-vremena-animacije: cubic-bezier(0.1,0.25,0.1,1)
• odgoda animacije: 0 s (bez odgode)
• animation-iteration-count: beskonačno (reproducira se bez kraja)
• animation-direction: naizmjenično (ide naprijed-natrag)
• animation-fill-mode: oboje

@ključni okviri

Prije primjene animacije na HTML elemente trebate napišite animaciju koristeći ključne kadrove. Općenito, ključni okviri su svaki međukorak u animaciji. Oni se određuju pomoću postotaka:

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

Također možete koristiti ključne riječi from i to 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 okvir je CSS pravilo, to znači da možete pisati CSS svojstva kao i obično.

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

@keyframes 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 linearna beskonačna; )

Imajte na umu da početak 0% i kraj 100% sadrže ista pravila CSS. To osigurava da se animacija savršeno ponavlja. Budući da je brojač ponavljanja postavljen na beskonačno, animacija će ići od 0% do 100%, a zatim odmah leđa na 0% i tako unedogled.

ime-animacije

Ime animacija se koristi najmanje dvaput:

• na pisanje animacije pomoću @keframes ;
• na koristiti animacija koristeći svojstvo animation-name (ili svojstvo skraćenog zapisa animacije).

@keyframes što god ( /* ... */ ) .selektor (naziv-animacije: što god; )

Slično nazivima CSS klasa, naziv animacije može uključivati ​​samo:

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

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

animacija-trajanje

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

Selektor (trajanje animacije: 0,5 s;)

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

funkcija mjerenja vremena animacije

Slično funkcijama za mjerenje vremena prijelaza, funkcije za mjerenje vremena animacije mogu koristiti ključne riječi, kao što su linearni , ease-out ili se mogu definirati pomoću proizvoljnih Bezierove krivulje.

Odabir (funkcija-vremena-animacije: lagano ulaženje; )

Zadana vrijednost: jednostavnost.

Budući da animacija u CSS-u koristi ključne kadrove, možete postaviti linearni funkcija vremena i simulirati specifična Bezierova krivulja definiranjem mnogi vrlo specifični ključni okviri. Provjerite Bounce.js za naprednu animaciju.

animacija-odgoda

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

Zadana vrijednost je 0 s, što znači da nema kašnjenja bilo koje vrste.

Korisno kada uključujete više animacija niz.

A, .b, .c ( animacija: poskakivanje 1 s; ) .b ( odgoda animacije: 0,25 s; ) .c ( odgoda animacije: 0,5 s; )

brojanje ponavljanja animacije

Prema zadanim postavkama reproducira se samo animacija jednom(vrijednost 1). Možete postaviti tri vrste vrijednosti:

• cijeli brojevi, poput 2 ili 3;
• frakcijski brojevi poput 0,5, koji će reproducirati samo pola animacije;
• ključna riječ infinite, koja će beskrajno ponavljati animaciju.

.selector ( animation-iteration-count: infinite; )

animacija-režija

Svojstvo animation-direction navodi hoće li kojim redom očitavaju se ključni okviri.

• normalno : počinje na 0%, završava na 100%, ponovno počinje na 0%.
• obrnuti : počinje na 100%, završava na 0%, ponovno počinje na 100%.
• alternativno : počinje od 0%, ide do 100%, vraća se do 0%.
• alternate-reverse : počinje od 100%, ide na 0%, vraća se na 100%.

Ovo je lakše zamisliti ako je broj ponavljanja animacije postavljen na beskonačno.

animation-fill-mode

Svojstvo animation-fill-mode određuje što će se dogoditi prije početak animacije i nakon njegovo dovršenje.

Prilikom utvrđivanja ključni okviri može se specificirati CSS pravila, koji će se primijeniti na različite korake animacije. Sada ova CSS pravila mogu sudarati se s onima koji već primijenjeno na animirane elemente.

animation-fill-mode vam omogućuje da pregledniku kažete ako stilovi animacije Također treba primijeniti izvan animacije.

Zamislimo se dugme, koji je:

• Crvena zadano;
• postaje plava na početku animacije;
• i na kraju zelena kada je animacija gotova.

Pozdrav, dragi čitatelji. Na ovaj dan, razgovarajmo o prilično zanimljivoj stvari koja se zove CSS animacija. Odnosno, ova animacija elemenata radi se samo pomoću stilova i ovdje se ne koriste skripte.

Kao što vidite, ovdje postoji atribut :lebdjeti, koji mijenja stil pozadine kada lebdite; u nekim bi primjerima trebao biti potreban.

Glatko promijenite boju elementa dok lebdite pomoću prijelaza

#box1 (
margina-dno: 5px;
boja pozadine: #ccc;

ispuna: 10px;
poravnanje teksta: središte;
širina: 200px;
visina:100px;

uvlaka teksta: 0px;
rub: 1px solid #888;
-moz-prijelaz: boja pozadine 0,8s 0,1s lakoća;
-o-prijelaz: boja pozadine 0,8 s 0,1 s lakoća;
-webkit-prijelaz: boja pozadine 0,8 s 0,1 s jednostavnost;
kursor: pokazivač;)

#kutija1 :lebdjeti {
boja pozadine: #97CE68;
boja: #333;
}

Kao što vidite, ovu smo animaciju postigli pomoću atributa tranzicija. Ovdje možete promijeniti brzinu animacije u sekundama, u ovom slučaju to košta 0,8s prije nego što se boja potpuno promijeni prilikom lebdenja i 0,1s prije nego što animacija proradi nakon lebdenja i uklanjanja pokazivača. (Oprostite zbog zagonetke :-)) Ova se vrijednost može mijenjati prema vašim potrebama.

Boja pozadine pri lebdenju postavljena je kao atribut :lebdjeti, ovdje je potrebno, inače animacija neće raditi.

Promjena veličine elementa

#box2 (
margina-dno: 5px;
boja pozadine: #ccc;
boja: #333;

ispuna: 10px;
poravnanje teksta: središte;
širina: 200px;
visina:100px;

uvlaka teksta: 0px;
rub: 1px solid #888;
-moz-prijelaz: sve 1s linearne;
-o-prijelaz: sve 1s linearne;
-webkit-prijelaz: sve 1s linearno;
kursor: pokazivač;)

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

U ovom smo primjeru postigli glatku promjenu veličine bloka pri lebdenju. Standardna vrijednost je 200 x 100, a vrijednost lebdenja je 150 x 50, što je određeno atributom :lebdjeti.

Ovdje također možete promijeniti blok samo po širini ili visini, samo trebate :lebdjeti 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.

Torzija objekta

#box3 (
margina-dno: 5px;
boja pozadine: #ccc;
boja: #333;

ispuna: 10px;
poravnanje teksta: središte;
širina: 200px;
visina:100px;

uvlaka teksta: 0px;
rub: 1px solid #888;
-moz-prijelaz: sve 1s 0,1s lagano upuštanje;
-o-prijelaz: sve 1s 0,1s lagano upuštanje;
-webkit-prijelaz: sve 1 s 0,1 s lagano ulazak;
kursor: pokazivač;)

#box3: lebdite (
boja pozadine: #97CE68;
boja: #000;
-webkit-transformacija: rotacija(360deg);
-moz-transformacija: rotacija(360deg);
-o-transformacija: rotacija (360 stupnjeva);
}

Torzija se javlja korištenjem 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 u smjeru suprotnom od kazaljke na satu, transformirati vrijednost treba postaviti na - (minus). Naravno, stupanj rotacije se može mijenjati.

Glatko približavanje i smanjivanje objekta

#box4 (
margina-dno: 5px;
boja pozadine: #ccc;
boja: #333;
ispuna: 10px;
poravnanje teksta: središte;
širina: 200px;
visina:100px;

uvlaka teksta: 0px;
rub: 1px solid #888;
-moz-prijelaz: sve 3s popuštanje;
-o-prijelaz: sve 3s popuštanje;
-webkit-transition: sve 3s ease-out;
kursor: pokazivač;)

#box4: lebdite (
boja pozadine: #97CE68;
boja: #000;
-webkit-transform: scale(2);
-moz-transformacija: mjerilo(2);
-o-transformacija: mjerilo(2);
}

U ovom primjeru, blok se glatko povećava u veličini 2 puta. Ova vrijednost je postavljena transformacija: mjerilo (2). Ako postavite vrijednost na 1,5, blok će se povećati 1,5 puta.

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

Glatki blok prijenosa prema dolje

#box5 (
margina-dno: 5px;
boja pozadine: #ccc;
boja: #333;
ispuna: 10px;
poravnanje teksta: središte;
širina: 200px;
visina:100px;

uvlaka teksta: 0px;
rub: 1px solid #888;
-moz-prijelaz: sve 1s lakoća ulaska;
-o-prijelaz: sve 1s lakoća u-van;
-webkit-transition: sve 1s lakoća ulaska;
kursor: pokazivač;)

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

Ovdje je kretanje navedeno u pikselima. U ovom slučaju (0.50px). Također možete podići blok s ovom vrijednošću od 0.-50px. Ili dijagonalno prema dolje 50px,50px. Jednom riječju, blok se može premjestiti bilo gdje.

To je u biti sve što sam htio reći. Ne, ne sve :-) Zaboravio sam vas podsjetiti da se ova CSS animacija može primijeniti na bilo koji objekt na stranici: slike, tekst, naslove, ikone itd. Za veze, glatka promjena boje je savršena; po mom mišljenju, vrlo je lijepa. :-)

Također, ovu informaciju podijelila je s nama stranica shpargalkablog.ru. Na čemu mu veliko hvala.

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

Bok svima. Nedavno sam naišao na niz vrlo korisnih i zanimljivih video tutorijala na temu " CSS animacija" Ali to je loša sreća, svi su videozapisi bili na engleskom i, vjerojatno, svaki dizajner izgleda ne zna engleski na dovoljnoj razini da razumije i asimilira sve potrebne informacije. Stoga sam odlučio prevesti ove lekcije za vas (ili bolje rečeno, napraviti besplatan prijevod). Ne treba zahvaljivati. Tako:

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

Što je CSS animacija?

Prije nego što vam kažem kako napraviti CSS animacije i zašto su one uopće potrebne, htio bih vam prvo objasniti, što se dogodiloCSS animacija, dajte definiciju ili tako nešto.

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

Kako animirati?

CSS ima dva glavna alata pomoću kojih možemo pomicati elemente po web stranici. Prvi (o kojem ćemo danas govoriti) je imovina tranzicija. Prije svega, uz njegovu pomoć stvaramo animacije u CSS-u. Drugi alat je vlasništvo animacija uparena s ključnim kadrovima(@keyframes – ključni okviri). Ovaj alat ćemo detaljnije pogledati u sljedećoj lekciji, ali sada ćemo pogledati CSS svojstvo prijelaza. A onda ćemo razgovarati o tome što treba animirati na stranici (kada to korisnik treba), a što ne treba animirati (kada animacija izgleda glupo i neprikladno), na temelju korisničkog iskustva (UX).

CSS svojstvo prijelaza - parametri i vrijednosti

Sintaksa

Prvo, pogledajmo kako se ovo svojstvo čita i razumijemo njegovu sintaksu. Ovo svojstvo pišemo otprilike ovako:

tranzicija: [vlasništvo] [trajanje] [funkcija mjerenja vremena] [odgoditi] ;

tranzicija: visina 1s popuštanje 0,2s ;

Ovo svojstvo dodjeljujemo elementu koji želimo animirati. Ovaj element postaje glatki tranzicija(ili postupno) između nekoliko svojih stanja (na primjer, visina 100 piksela i visina 200 piksela). I kako će ovaj izgledati tranzicija(od engleskog prijelaza), ovisit će o parametrima koje mu damo.

Prvi parametar (vrijednost) svojstva prijelaza je drugi vlasništvo element koji treba animirati (npr. visina).

Drugi parametar je trajanje (duration) animacije, odnosno koliko će elementu trebati prijelaz iz jednog stanja u drugo (primjerice 2s ili 2000ms).

Treći parametar je funkcija mjerenja vremena [vrijemefunkcija] (ising funkcija [ popuštanjefunkcija]). Kako će intenzitet animacije biti raspoređen kroz cijelo vrijeme. Na primjer, animacija može početi naglo, a zatim usporiti na kraju i završiti prijelaz glatko. Mogu se koristiti kao ključne riječi (na primjer, olakšatiolakšati-u-van,linearni), i funkcije Bezierove kocke (na primjer, kubični-bezier (0,17, 0,67, 0,83, 0,67)). Možete jednostavno i praktično prilagoditi Bezierovu kocku na ovom resursu http://cubic-bezier.com, kao i funkciju koraka kako biste stvorili animaciju okvir po okvir (korak po korak).

I na kraju, parametar odgoditi. Odgoda animacije je vrijeme koje morate čekati prije nego što animacija (u našem slučaju, prijelaz) počne.

Primjer CSS animacije prijelaza

Pogledajmo ovaj primjer CSS animacije:

prijelaz: neprozirnost 300 ms lagano ulaženje 1 s;

Ovdje animiramo samo imovinu neprozirnost(neprozirnost). 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 (animaciju). Da li razumiješ?

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

Drugi parametar ( 300 ms) govori nam 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 ( olakšati-u-van) s trećim parametrom učinit će početak i kraj animacije glatkijim.

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

Općenito, ovo je formula za snimanje animacije prijelaza. Ovo je sintaksa. Ako je potrebno, možete dodati više od jednog [property] prijelaza 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 prijelaza, umjesto točke i zareza na kraju, stavite samo zarez i napišite parametre za drugo svojstvo. I ne zaboravite nakon toga staviti točku i zarez na kraju kako bi funkcioniralo.

Što možete animirati u CSS-u?

Do sada smo raspravljali samo o sintaksi svojstva prijelaza. Sada razgovarajmo o svojstvima, koja možemo animirati, a koja ne. Jer postoje neke stvari koje jednostavno nema smisla animirati, a neka se svojstva jednostavno ne mogu animirati.

Animable Properties

Uzmimo, na primjer, svojstva kao što su:

1. veličina fonta;
2. boja pozadine;
3. širina;
4. lijevo (koliko daleko od lijeve strane element se može pomaknuti [pozicionirati]…

Očito, ima smisla animirati ova svojstva. Ako promijenite njihove vrijednosti, to će vizualno promijeniti element. Ako promijenite veličinu fonta s npr. 14 na 28 piksela, vidjet ćete da se font postupno povećava i pojavljuje se animacija koja traje neko vrijeme. Animacija uvijek ima smisla ako su vrijednosti svojstava jasne (najčešće numeričke) vrijednosti. Ako povećate veličinu fonta na 100 piksela, 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 može biti animirano. Najčešće ovo radi.

Svojstva koja nisu animirana

A ovdje je popis svojstava koja se ne mogu animirati (primjer):

1. prikaz;
2. obitelj-fontova;
3. položaj…

Ovo su neki od njih koje sam uzeo kao primjer kako biste mogli osjetiti razliku između animable i non-animable CSS svojstava.

Uzmimo prikaz. Možete li zamisliti kako se vizualno mijenja između " prikaz:blok;" i " prikaz:u redu-blok;"? Kako se izgled elementa može glatko mijenjati između " položaj:relativan;"I" položaj:apsolutni;"? Ne, naravno, element će izgledati drugačije ako se ova svojstva promijene. Ali kako možete zamisliti tranzicija? Ne možeš to učiniti. Pravo? Ne možete zamisliti okretanje fonta Helvetica u fontu Gruzija, svako slovo, jednostavno neće ići. Možete promijeniti ove fontove, ali oni će se naglo promijeniti i neće se pojaviti animacija.

Izvedba animacije u CSS-u

Općenito, mnoga svojstva su animirana, ali neka nisu. Sada odlučimo koja su animirana svojstva bolja za animiranje, a koja su lošija. Radi se o izvedbi. Dotaknuli smo se teme izvedbe jer je animacija proces koji zahtijeva mnogo resursa.

Općenito, ovo su stvari koje najbolje funkcioniraju za animaciju:

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

Štoviše, sve prve tri stavke ovog popisa su parametri svojstva transformacije (translate, scale, rotate). Pozicioniranje se odvija duž X i Y osi.

Ako odlučite animirati bilo što drugo, riskirate da ne dobijete meki, glatki prijelaz od 60 sličica u sekundi. Paul Lewis & Irish

A upravo to nas zanima kada govorimo o izvedbi animacije. Općenito, najprikladnija svojstva za animaciju su transformirati ineprozirnost. Kada animirate bilo što drugo, fps animacije može pasti mnogo ispod 60fps.

Sažmimo ovu točku na sljedeći način. Pokušajte izbjeći ponovno crtanje elemenata na web stranici i animiranje elemenata koje preglednik teško prikazuje (na primjer, sjene).

Kako napraviti animaciju u CSS-u?

Sada shvatimo kako pokrenuti animaciju. Što je potrebno učiniti da element počne animirati. Drugim riječima, kako napraviti animaciju uCSS.

Nije teško i postoji mnogo različitih načina za to. Ali postoje 2 glavna koja morate savladati bez greške. Prvi način je animacija kada lebdite iznad elementa(pseudo-klasa: lebdjeti). Pređite mišem iznad elementa i pokrenut će se animacija. Na ovaj način možete animirati sam element ili bilo koji od njegovih podređenih elemenata. Onda ću ti pokazati kako to radi. Drugi način je mijenjanje klase elementa. To jest, imate regularni element, mijenjate (ili dodajete) njegovu klasu u klasu koja ima potpuno različite stilove. Ako dodate klasu, pojavit će se animacija, a ako uklonite klasu, pojavit će se obrnuta animacija. Ovo je dobar način za animiranje izbornika ili padajućih izbornika.

Pogovor

Pokrili smo sve što nam je potrebno za stvaranje animacija koristeći čisti CSS. Vrlo brzo ćemo pogledati praktične primjere, a malo kasnije - vrlo zanimljive primjere.

Jeste li pročitali do samog kraja?

Je li ovaj članak bio koristan?

Ne baš

Što vam se točno nije svidjelo? Je li članak bio nepotpun ili lažan?
Pišite u komentarima i obećavamo da ćemo se poboljšati!