Što se bliže približavamo interfejsu koji počinje da radi, to postaje razumljivije za korisnika. U životu se gotovo ništa ne događa trenutno - kada otvorimo limenku gaziranog pića ili zatvorimo oči prije spavanja, promatramo gomilu međustanja, a ne oštro "otvoreno/zatvoreno", kao što se događa na webu.

U svom članku ću podijeliti svoje znanje o CSS animaciji i kako raditi s njom. Animacija daje web stranicama dinamiku i poboljšava razumijevanje njihovih mogućnosti. Oživljava web stranice i pomaže u interakciji korisnika. Za razliku od CSS3 prijelaza, CSS animacije su bazirane na ključnim kadrovima. Koji vam omogućavaju da igrate i ponavljate efekte određeno vrijeme, kao i da automatski zaustavite animaciju unutar petlje.

Animacija je skup ključnih kadrova ili ključnih kadrova pohranjenih u CSS-u:

@keyframes test animacije ( 0% ( širina: 100px; ) 100% ( širina: 200px; ) )

Hajde da pogledamo šta se ovde dešava. Ključna riječ @keyframes označava samu animaciju. Zatim dolazi naziv animacije, u našem slučaju animacija-test. Vitičaste zagrade sadrže listu ključnih kadrova. Koristimo početni okvir od 0% i završni okvir od 100% (mogu se pisati i kao od i do).
Pogledajte kod ispod. Animacija se može postaviti i na ovaj način:

@keyframes animation-test ( od ( širina: 0; ) 25% ( širina: 75px; ) 75% ( širina: 150px; ) do ( širina: 100%; ) )

Zapamtite, ako početni ili završni okvir nije specificiran, pretraživač će ih automatski otkriti kao da na njih nije primijenjena animacija.

Možete povezati animaciju sa elementom kao što je ovaj:

Element-selektor (ime-animacije: ime-vaše-animacije; trajanje-animacije: 2,5 s; )

Svojstvo animation-name specificira ime za animaciju @keyframes. Pravilo trajanja animacije određuje trajanje animacije u sekundama (1s, 30s, .5s) ili milisekundama (600ms, 2500ms).

Također možete grupirati ključne kadrove:

@keyframes test animacije ( 0%, 35% ( širina: 50px; ) 75% ( širina: 200px; ) 100% ( širina: 100%; ) )

Na jedan element (selektor) možete primijeniti nekoliko animacija. Njihove nazive i parametre treba pisati po redoslijedu primjene:

Element-selektor (ime-animacije: ime-anime-1, ime-anime-2; trajanje-animacije: 1s, 3s; )

Kašnjenje animacije:

Svojstvo animation-delay specificira kašnjenje prije nego što se animacija reproducira, u sekundama ili milisekundama:

Element-selektor (ime-animacije: ime-animacije-1; trajanje-animacije: 3s; kašnjenje animacije: 2s; /* 2 sekunde će proći prije nego što animacija počne */ )

Repriza animacije:

Koristeći animation-iteration-count možemo odrediti koliko puta će se animacija ponoviti: 0, 1, 2, 3, itd. Ili beskonačno za petlju:

Element-selektor (ime-animacije: ime-anime-1; trajanje-animacije: 3s; kašnjenje animacije: 4s; broj-iteracija animacije: 5; /* animacija se reproducira 5 puta */ )

Stanje elementa prije i poslije animacije:

Koristeći svojstvo animation-fill-mode, moguće je odrediti u kakvom će stanju biti element prije početka animacije i nakon njenog završetka:

animation-fill-mode: naprijed;- element animacije će biti u stanju posljednjeg ključnog kadra nakon završetka/reprodukcije;

a nimation-fill-mode: unatrag;- element će biti u stanju prvog ključnog kadra;

animacija-fill-mode: oba; - prije početka animacije, element će biti u stanju prvog ključnog kadra, nakon završetka - u stanju posljednjeg.

Pokrenite i zaustavite animaciju:

Ovo je odgovornost svojstva animation-play-state, koje može imati dvije vrijednosti: pokrenuto ili pauzirano.

Element-selektor:hover (animation-play-state: pauzirano;)

Režija animacije:

Svojstvo animation-direction specificira kako kontrolirati smjer u kojem se animacija reproducira. Evo mogućih vrijednosti:

pravac animacije: normalan; - animacija se reprodukuje u direktnom redosledu;

pravac animacije: obrnuto; - animacija se reproducira obrnutim redoslijedom, od do do od;

pravac animacije: alternativni;- parna ponavljanja animacije se reproduciraju obrnutim redoslijedom, neparna - naprijed;

pravac animacije: alternativno-obrnuti; - neparna ponavljanja animacije se reproduciraju obrnutim redoslijedom, parna - naprijed.

Funkcija glatkog izlaza animiranih kadrova:

Svojstvo animation-timing-function vam omogućava da postavite posebnu funkciju odgovornu za brzinu reprodukcije animacije. Podrazumevano, animacija počinje sporo, brzo se ubrzava i usporava na kraju. Trenutno imamo sljedeće unaprijed definirane vrijednosti: linearno, lakoća, lakoća ulaska, opuštanje, lakoća ulaska, korak-početak, korak-kraj.

Međutim, takve funkcije možete kreirati sami. Značenje funkcija vremena animacije: kubni-bezier (P1x, P1y, P2x, P2y); uzima 4 argumenta kao ulaz i gradi krivulju distribucije za proces animacije.

Možete detaljnije proučiti ili isprobati kreiranje ovih funkcija na web stranici http://cubic-bezier.com

Konačno, animacija se može raščlaniti na skup pojedinačnih vrijednosti (koraka) pomoću funkcije koraka, koja kao ulaz uzima broj koraka i smjer (početak ili kraj). U primjeru ispod, animacija se sastoji od 5 koraka, od kojih će se posljednji dogoditi neposredno prije kraja animacije:

Element-selektor (ime-animacije: ime-animacije-1; trajanje-animacije: 3s; kašnjenje animacije: 5s; broj-iteracija animacije: 3; funkcija-vremenske-animacije: koraci(5, ​​kraj); )

Podrška pretraživača za animaciju:

Vrijednosti u tabeli označavaju prvu verziju preglednika koja u potpunosti podržava svojstvo.

Vrijednosti sa -webkit-, -moz- ili -O- označavaju prvu verziju koja je radila s prefiksom.

Na web stranici https://www.w3schools.com CSS animaciju možete proučiti detaljnije (sa primjerima).
Jedna od popularnih biblioteka za rad sa animacijama je animate.css.

Može se činiti da poteškoće na koje nailazite pri radu sa CSS animacijama nisu opravdane. Ali to apsolutno nije istina.

Prvo, CSS je moćan alat za poboljšanje korisničkog iskustva sučelja. To ne utječe mnogo na produktivnost korisnika. Za razliku od JavaScript analoga. Tehnologija, kroz upotrebu računarske snage GPU omogućava pretraživačima da brzo optimizuju brzinu renderovanja elemenata.

Drugo, fleksibilnost, brzina i lakoća implementacije CSS animacija pomoći će da se "udahne život" postojećim ili novim interfejsima. Nakon što ste razvili opće i originalne pristupe i shvatili specifičnosti tehnologije, možete kreirati jedinstvena upotrebna sučelja za gotovo sve projekte.

Nadam se da ste pronašli u članku korisne informacije za mene. Predivni sajtovi za sve. Ne zaboravite na animacije :)

PAŽNJA! Pošto ćemo u ovoj lekciji analizirati animaciju, neću vam moći pokazati primjer njenog rada na slikama, pa slobodno otvorite uređivač koda i tamo napišite kod dat u ovom članku.

Osnove stvaranja

Dakle, prije svega, morate početi s tim kako ga kreirati. Vjerovatno ste navikli na činjenicu da se bilo koja stvar u CSS-u implementira dodjeljivanjem potrebnih svojstava sa odgovarajućim vrijednostima željenom selektoru. Dakle, kada kreirate animaciju, to nije dovoljno. Dijagram izgleda ovako:

Sami efekti prijelaza se kreiraju pomoću @keyframes

Traženom elementu je data ista animacija, kao i njegovi parametri (sve to koristeći svojstva i njihove vrijednosti).

Dakle, prvo treba da opišemo neophodne promene u @keyframes, hajde da pobliže pogledamo kako da radimo sa njima.

@keyframes sintaksa

Zapravo, bit će mi lakše da vam sve objasnim koristeći gotov primjer, iako vrlo jednostavan. Evo ga (kod se dodaje u css fajl):

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;)) 100%(font-size: 50px;))

@keyframes puls ( 0% (veličina fonta: 50px;) 50% (veličina fonta: 60px;))

Dakle, iza ključne riječi @keyframes postoji proizvoljna riječ koja će djelovati kao ime animacije. U našem slučaju to je “puls”. Zatim otvorite vitičaste zagrade u kojima su napisana potrebna pravila.

Procenti su takozvane vremenske oznake na kojima će navedena svojstva biti dodana elementu. U našem slučaju to što je napisano znači sljedeće: na samom početku izvođenja veličina fonta će biti 50 piksela, u sredini će se povećati na 60, a na kraju će se opet smanjiti na početnu veličinu.

Ključne riječi od i do mogu zamijeniti procentualni unos; označavaju 0% i 100%, odnosno početak i kraj reprodukcije.

Stavljanje animacije u akciju

Za sada imamo samo kod koji generiše efekat animacije, ali se nigde ne koristi. Ako osvježite svoju web stranicu, ništa se neće promijeniti. U skladu s tim, da biste primijenili animaciju, morate izvršiti dva koraka:

Odaberite element za koji će se primijeniti

Povežite ga sa pravilima opisanim preko @keyframes (preko imena), i također postavite dodatna podešavanja ako je potrebno.

Pokusajmo

U svojoj html datoteci napravio sam blok sa klasom senke, koji sadrži jednostavan red teksta. Naš cilj je primijeniti efekte animacije koje smo ranije opisali na ovo tekstualni element.

Postoje dva potrebna svojstva koja se moraju specificirati u ovom slučaju da bi sve funkcioniralo. Prvo, ovo je ime koje smo napisali u ključnim kadrovima. Drugo, ovo je trajanje animacije, jer bez ovog parametra pretraživač jednostavno neće moći da je reprodukuje.

Dakle, pored stilova koje naš blok već ima, dodajemo nove:

naziv animacije: puls; animacija-trajanje: 2s;

Dakle, sve će se ponoviti 4 puta, a zatim stati. Kao što razumijete, umjesto četiri možete unijeti bilo koji broj.

Beskrajna animacija u css3

Implementirano vrlo lako koristeći istu imovinu. Zapravo, možete samo postaviti broj ponavljanja na nekoliko hiljada, to će biti dovoljno, ali teoretski se naša animacija neće ponavljati beskonačno.

broj iteracija animacije: beskonačan;

animacija - iteracija - broj: beskonačno;

To je to, sada smo uradili beskonačno ponavljanje. Ne preporučujem da provjeravate da li je to istina nakon što cijeli život sjedite za monitorom. Ovo se jednostavno koristi u slučajevima kada želite da se efekat stalno ponavlja i da ne nestane. Ako je nenametljiv i ne ometa korisnika, zašto onda ne.

Kašnjenje prije početka

Podrazumevano, reprodukcija počinje nakon što se stranica potpuno učita. Ovo ponašanje se može kontrolirati korištenjem svojstva kašnjenja animacije. Njegova vrijednost je navedena u sekundama.

Smjer

Još jedno zanimljivo svojstvo je animation-direction. Podrazumevano je postavljeno na normalno; ako ga postavite na obrnuto, tada će se svi opisani okviri izvršavati u suprotnom smjeru. Hajde da proverimo u čemu je razlika. Da bih to učinio, malo sam promijenio efekat dodavanjem još jednog okvira.

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

@keyframes puls ( 0% (veličina fonta: 50px;) 50% (veličina fonta: 60px;) 70% (veličina fonta: 80px;) 100% (veličina fonta: 50px;))

Dakle, s normalnim smjerom, u prvoj polovini animacije veličina fonta će se povećati na 60 piksela, zatim će se ponovo naglo povećati, na 80, nakon čega će se vratiti u prvobitni položaj.

Rice. 2. Originalna veličina teksta

Rice. 3. Veličina fonta je skoro na kraju animacije, prije nego što se naglo vrati u prvobitno stanje.

Sada pitamo:

pravac animacije: obrnuto;

animacija - smjer: obrnuto;

Sve se okrenulo naglavačke. Prvo će se tekst povećati za čak 30 piksela, do 80, a za ostatak animacije će se postepeno smanjivati, na kraju se vraća na prethodnu veličinu. To je jednostavno.

Forma za animaciju

A ovo je možda jedna od najzanimljivijih postavki s kojom možete dugo eksperimentirati. Podrazumevano, sve promjene se izvode istom brzinom. Ova vrsta animacije se zove linearna, a osim nje postoje i druge.

Pozdrav, prijatelji! Danas ćemo se osvrnuti na vrlo zanimljivu temu - kreiranje CSS animacija koristeći pravi primjer. Kulminacija ovog tutorijala biće kreiranje prelepe CSS animacije logotipa od milion dolara.

Cool

Mucanje

Materijali za lekciju

• Izvori: Preuzmi
• Osnovni primjer iz lekcije: https://codepen.io/agragregra/pen/PKNavm
• Počevši predložak iz lekcije: https://github.com/agragregra/optimizedhtml-start-template

Malo teorije

Prije nego počnete kreirati animirani primjer, trebali biste prijeći na osnove CSS animacije, razmotriti osnovne pojmove, svojstva i pravila Kreiranje CSS-a animacije.

Ako ste već imali iskustva sa kreiranjem animacija u bilo kojoj aplikaciji, kao što je Adobe After Effects ili stari Flash Professional (sada Adobe Animate), tada biste trebali biti upoznati s konceptima kao što su „Ključni okviri“, „Privremene funkcije ili dinamika kretanja“, koji se, kao iu bilo kojem drugom području ​​animacije, primjenjuju na animaciju elemenata na stranici pomoću CSS-a. Međutim, za razliku od rada sa sučeljima aplikacije, svoje CSS animacije kreirate pisanjem koda u uređivaču.

CSS pravilo @keyframes

Kreiranje CSS animacije počinje deklariranjem imena animacije u bloku @keyframes i definisanje takozvanih koraka animacije ili ključnih kadrova.

Za pregled teorije i osnova koristićemo čisti CSS, a kasnije ćemo, koristeći složeniji primjer, koristiti Sass pretprocesor. Više o Sass-u možete naučiti u lekciji. Osim toga, za dublje razumijevanje osnova CSS-a, preporučujem i čitanje lekcija “Osnove CSS-a - Vodič za mališane” i “Svi CSS selektori u jednoj lekciji”

Pogledajmo strukturu @keyframes i rad sa ključnim kadrovima jednostavan primjer:

@keyframes okretanje ( 0% ( radijus granica: 0 0 0 0; transformacija: rotacija (0 stepeni); ) 25% ( radijus granice: 50% 0 0 0; transformacija: rotacija (45 stepeni); ) 50% ( granica- poluprečnik: 50% 50% 0 0; transformacija: rotacija (90 stepeni); ) 75% ( radijus granica: 50% 50% 50% 0; transformacija: rotacija (135 stepeni); ) 100% ( radijus granice: 50% 50 % 50% 50%; transformacija: rotacija (180 stepeni); ) )

U prvom redu vidimo to posle ključna riječ@keyframes njegovo ime je "okretanje". Ovo je naziv bloka okvirnih okvira, na koji ćemo se dalje pozivati.

Nakon deklaracije otvara se vitičasta zagrada (in u ovom primjeru on čisti CSS), u kojem se svojstva upisuju uzastopno od 0% do 100% za svaki ključni okvir. Imajte na umu da između 0% i 100% možete umetnuti onoliko međuvrijednosti koliko želite, bilo da je to 50%, 75% ili čak 83%. Ovo je vrlo slično vremenskoj liniji aplikacije za animaciju, gdje možete dodati bilo koje međustanje između dva stanja.

Nadalje, ovaj blok koda sa ključnim kadrovima može se primijeniti na bilo koji CSS selektor, ali najčešće se pripremaju za određeni selektor ako želimo postići određeno ponašanje iz željenog bloka.

Pristup bloku ključnih okvira

Nakon što smo postavili ključne okvire za objekat (u stvarnom životu to se radi paralelno ili čak nakon pristupa bloku sa ključnim okvirima), možemo pristupiti našem novokreiranom bloku. Pogledajmo sljedeći jednostavan kod iz gornjeg primjera:

Div (širina: 120px; visina: 120px; boja pozadine: ljubičasta; margina: 100px; animacija: okretanje 2s ease-out 1s beskonačno alternativno; )

Ništa posebno do poslednjeg reda. Ovdje određujemo kako će objekt u početku izgledati i u posljednjoj liniji bloka upućujemo na blok ključnih okvira koji se zove "okretanje":

Animacija: okretanje 2s ease-out 1s beskonačno naizmjenično;

Ako je sve relativno jasno sa definicijom ključnih okvira, onda je ovoj liniji potrebno hitno objašnjenje. Kao što vidimo, prvo dolazi CSS svojstvo"animacija". Ovo je skraćeni oblik, kao što je svojstvo “margin: 20px 30px 40px 50px”, koje se može podijeliti na nekoliko zasebnih svojstava:

Po ovoj analogiji, kompozitno svojstvo "animacija" može se podijeliti na nekoliko zasebnih svojstava:

naziv-animacije	Ime animacije kojoj se pristupa iz @keyframes
animacija-trajanje	Trajanje ili koliko dugo traje izvođenje CSS animacije. Može se navesti u sekundama (s) ili milisekundama (ms)
funkcija vremena animacije	Vremenska funkcija, dinamika kretanja objekta ili promjene svojstava ( lakoća- (podrazumevano) animacija počinje polako, ubrzava se i polako završava; linearno- animacija se odvija ravnomjerno; ease-in- počinje polako i ubrzava prema zadnjem ključnom kadru; ease-out- počinje brzo i lagano usporava na kraju; lakoća ulaska- polako počinje i polako se završava)
animacija-kašnjenje	Vrijeme kašnjenja animacije PRIJE početka. Također je navedeno u sekundama ili milisekundama
animacija-iteracija-broj	Broj ponavljanja (iteracija) animacije ( beskonačno- beskonačno, ili možete odrediti jednostavan broj bez jedinica)
animation-direction	Smjer animacije, uzastopno, obrnuto ili naprijed-nazad ( normalno- (podrazumevano) animacija se reproducira od početka do kraja i prestaje; alternativno- igra od početka do kraja iu suprotnom smjeru; alternativno-obrnuto- igra od kraja do početka i nazad; obrnuto- animacija se reproducira od kraja.)
animacija-play-stanje	Kontroliranje reprodukcije animacije ( pauzirao(pauza), trčanje(lansiranje) itd.). Može se primijeniti na:hover ili iz JS funkcije ako je potrebno
animacija-fill-mode	Stanje elementa prije i nakon reprodukcije animacije. Na primjer, vrijednost unazad omogućava vam da vratite sva svojstva u prvobitno stanje odmah nakon primjene animacije

Najčešće, iskusni programeri ne pišu sva ova svojstva odvojeno, već koriste kratku notaciju i njena struktura je sljedeća:

animacija: (1. naziv-animacije - ime) (2. trajanje animacije - trajanje) (3. dinamika-funkcija vremena animacije - dinamika kretanja) (4. kašnjenje animacije - pauza prije početka) (5. iteracija-animacija- count - broj izvršenja) (6. animacija-direction - smjer)

Animacija: animationname 2s linearna 1s beskonačno obrnuto

Iz primjera vidimo da pristupamo bloku @keyframes animationname, postavljamo trajanje animacije na 2 sekunde, dinamika je linearna, pauza prije pokretanja je 1 sekunda, animacija se beskrajno ponavlja i izvodi u suprotnom smjeru.

Kao što sam ranije rekao, kratka notacija počinje svojstvom " animacija“, a zatim slijede vrijednosti čiji je redoslijed bolje ne zaboraviti, kako ne bi došlo do zabune prilikom pisanja CSS animacije.

Međutim, većina ovih svojstava se može izostaviti, jer će najčešće njihove zadane vrijednosti u potpunosti zadovoljiti većinu zadataka kreiranja animacije. Neki od njih možda nisu napisani, ali ostale bi trebalo naznačiti redoslijedom o kojem smo ranije govorili. Općenito, da bi vaša animacija funkcionirala, potrebna su vam samo dva parametra u vašem kompozitnom svojstvu - ime ( naziv-animacije) i trajanje ( animacija-trajanje).

CSS3 animacija se dosta koristi. Vrijeme je da čak i najpočetnici graditelji web stranica shvate što je CSS animacija i kako je kreirati. Mogli biste pomisliti da je CSS3 animacija usmjerena na pomicanje blokova i da izgleda kao crtani film. Ali CSS animacija nije samo pomicanje elementa s jedne tačke na drugu, već i izobličenje i druge transformacije. Da ovo bude jasno čak i početnicima, sve sam zapisao korak po korak.

1. Osnovna svojstva CSS3 animacije

Mali teorijski blok iz kojeg ćete razumjeti koja su CSS3 svojstva odgovorna za animaciju, kao i koje vrijednosti mogu uzeti.

• naziv-animacije— jedinstveni naziv za animaciju (ključni okviri, o njima ćemo govoriti u nastavku).
• animacija-trajanje— trajanje animacije u sekundama.
• funkcija vremena animacije— krivulja promjene brzine animacije. Na prvi pogled je vrlo nejasno. To je uvijek lakše prikazati na primjeru, a vidjet ćete ih u nastavku. Može imati sljedeće vrijednosti: linearno | lakoća | ease-in | ease-out | kubni-bezier(n,n,n,n) .
• animacija-kašnjenje— kašnjenje u sekundama prije početka animacije.
• animacija-iteracija-broj— broj ponavljanja animacije. Može se navesti ili jednostavno kao broj, ili možete odrediti beskonačno i animacija će se izvoditi beskonačno.

Evo samo osnovnih svojstava, koja su više nego dovoljna za kreiranje vaše prve CSS3 animacije.

Posljednja stvar koju trebamo znati i razumjeti iz teorije je kako kreirati ključne okvire. Ovo je takođe lako uraditi i radi se pomoću pravila @keyframes, unutar kojeg su specificirani ključni okviri. Sintaksa za ovo pravilo je sljedeća:

Iznad postavljamo prvi i posljednji okvir. Sva međustanja će se izračunati AUTOMATSKI!

2. Pravi primjer CSS3 animacije

Teorija je, kao i obično, dosadna i nije uvijek jasna. Mnogo je lakše vidjeti sve koristeći pravi primjer, ali najbolje je to učiniti sami na nekoj probnoj HTML stranici.

Kada učite programski jezik, obično napišete program “Zdravo, svijete!” iz kojeg možete razumjeti sintaksu ovog jezika i neke druge osnovne stvari. Ali mi ne proučavamo programski jezik, već jezik opisa izgled dokument. Stoga ćemo imati svoj vlastiti “Zdravo, svijete!”

Evo šta ćemo uraditi na primjer: hajde da imamo neku vrstu bloka