Što smo bliže sučelju koje počinje raditi, to postaje razumljivije za korisnika. U životu se gotovo ništa ne događa odmah - kada otvorimo limenku sode ili zatvorimo oči prije spavanja, promatramo hrpu međustanja, a ne oštro "otvoreno/zatvoreno", kao što se događa na webu.

U svom ću članku podijeliti svoje znanje o CSS animaciji i kako s njom raditi. Animacija web stranicama daje dinamiku i poboljšava razumijevanje njihovih mogućnosti. Oživljava web stranice i pomaže u interakciji s korisnicima. Za razliku od CSS3 prijelaza, CSS animacije temelje se na ključnim okvirima. Koji vam omogućuju reprodukciju i ponavljanje efekata određeno vrijeme, kao i automatsko zaustavljanje animacije unutar petlje.

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

@keyframes animation-test ( 0% ( width: 100px; ) 100% ( width: 200px; ) )

Pogledajmo što se ovdje događa. Ključna riječ @keyframes označava samu animaciju. Zatim dolazi naziv animacije, u našem slučaju animation-test. Vitičaste zagrade sadrže popis ključnih okvira. Koristimo početni okvir od 0% i završni okvir od 100% (također se mogu pisati kao od i do).
Pogledajte kod ispod. Animacija se također može postaviti na sljedeći način:

@keyframes test animacije ( od ( width: 0; ) 25% ( width: 75px; ) 75% ( width: 150px; ) do ( width: 100%; ) )

Upamtite, ako početni ili završni okvir nije naveden, preglednik će ih automatski otkriti kao da na njih nije primijenjena nikakva animacija.

Možete povezati animaciju s elementom ovako:

Selektor elementa (naziv-animacije: naziv-vaše-animacije; trajanje-animacije: 2,5 s; )

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

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

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

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

Selektor elementa (ime-animacije: ime-animacije-1, ime-animacije-2; trajanje-animacije: 1s, 3s; )

Odgoda animacije:

Svojstvo animation-delay navodi kašnjenje prije reprodukcije animacije, u sekundama ili milisekundama:

Selektor elementa (naziv-animacije: naziv-animacije-1; trajanje-animacije: 3s; odgoda-animacije: 2s; /* 2 sekunde će proći prije nego što animacija počne */ )

Ponovno reproduciraj animaciju:

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

Selektor elementa (naziv-animacije: naziv-animacije-1; trajanje-animacije: 3s; odgoda-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 element biti prije početka animacije i nakon što ona završi:

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

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

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

Pokretanje i zaustavljanje animacije:

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

Element-selector:hover ( animation-play-state: paused; )

Smjer animacije:

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

animacija-režija: normalna; - animacija se reproducira izravnim redoslijedom;

animacija-režija: obrnuto; - animacija se reproducira obrnutim redoslijedom, od do do od;

animacija-smjer: naizmjenično;- parna ponavljanja animacije igraju se obrnutim redoslijedom, neparna - naprijed;

animacija-smjer: naizmjenično-obrnuto; - neparna ponavljanja animacije igraju se obrnutim redoslijedom, a parna - naprijed.

Funkcija glatkog ispisa animiranih okvira:

Svojstvo animation-timing-function omogućuje postavljanje posebne funkcije odgovorne za brzinu reprodukcije animacije. Prema zadanim postavkama, animacija počinje sporo, brzo se ubrzava i usporava na kraju. Trenutno imamo sljedeće unaprijed definirane vrijednosti: linearno, lakoća, lagano ulazak, lagano izlazak, lagano ulazak van, korak-početak, korak-kraj.

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

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

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

Selektor elementa (naziv-animacije: naziv-animacije-1; trajanje-animacije: 3s; odgoda-animacije: 5s; broj-iteracija-animacije: 3; funkcija-vremena-animacije: koraci(5, ​​kraj); )

Podrška preglednika za animaciju:

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

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

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

Može se činiti da poteškoće s kojima se susrećete pri radu s CSS animacijama nisu opravdane. Ali to apsolutno nije točno.

Prvo, CSS je moćan alat za poboljšanje korisničkog iskustva sučelja. Ne utječe značajno na produktivnost korisnika. Za razliku od JavaScript analoga. Tehnologija, kroz korištenje računalna snaga GPU omogućuje preglednicima da brzo optimiziraju brzinu prikazivanja elemenata.

Drugo, fleksibilnost, brzina i jednostavnost implementacije CSS animacija pomoći će "udahnuti život" u postojeća ili nova sučelja. Nakon što ste razvili opće i originalne pristupe i razumjeli specifičnosti tehnologije, možete stvoriti jedinstvena upotrebljiva sučelja za gotovo sve projekte.

Nadam se da ste pronašli u članku korisna informacija Za sebe. Lijepe stranice za sve. Ne zaboravite na animacije :)

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

Osnove stvaranja

Dakle, prije svega, morate početi s time kako ga stvoriti. Vjerojatno ste navikli na činjenicu da se bilo koja stvar u CSS-u implementira dodjeljivanjem potrebnih svojstava s odgovarajućim vrijednostima željenom selektoru. Dakle, kod izrade animacije to nije dovoljno. Dijagram izgleda ovako:

Sami efekti prijelaza stvaraju se pomoću @keyframes

Traženom elementu se daje ista animacija, kao i njegovi parametri (sve to pomoću svojstava i njihovih vrijednosti).

Dakle, prvo moramo opisati potrebne promjene u @keyframes, pogledajmo pobliže kako raditi s njima.

sintaksa @keyframes

Zapravo, bit će mi lakše sve vam objasniti na gotovom primjeru, iako vrlo jednostavnom. Evo ga (kod je dodan u css datoteku):

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

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

Dakle, nakon ključne riječi @keyframes nalazi se proizvoljna riječ koja će djelovati kao naziv animacije. U našem slučaju to je "puls". Zatim otvorite vitičaste zagrade u kojima su zapisana potrebna pravila.

Postoci su takozvane vremenske oznake u kojima će navedena svojstva biti dodana elementu. U našem slučaju 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 from i to mogu zamijeniti unos postotka; one označavaju 0% odnosno 100%, odnosno početak i kraj reprodukcije.

Provođenje animacije u djelo

Za sada imamo samo kod koji generira efekt animacije, ali se nigdje ne koristi. Ako osvježite svoju web stranicu, ništa se neće promijeniti. Sukladno tome, da biste primijenili animaciju, morate izvršiti dva koraka:

Odaberite element za koji će se primijeniti

Povežite ga s pravilima opisanim preko @keyframes (preko imena), i također postavite dodatne postavke ako je potrebno.

Pokušajmo

U svojoj html datoteci stvorio sam blok s klasom shadow, koja sadrži jednostavan redak teksta. Naš cilj je na ovo primijeniti animacijske efekte koje smo ranije opisali element teksta.

Postoje dva obavezna svojstva koja je potrebno specificirati u ovom slučaju da bi sve radilo. Prvo, ovo je ime koje smo napisali u ključnim okvirima. Drugo, ovo je trajanje animacije, jer bez ovog parametra preglednik je jednostavno neće moći reproducirati.

Dakle, uz stilove 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 jednostavno korištenjem istog svojstva. Zapravo, možete jednostavno postaviti broj ponavljanja na nekoliko tisuća, to će biti dovoljno, ali teoretski se naša animacija neće ponavljati unedogled.

broj ponavljanja animacije: beskonačno;

animacija - iteracija - broj : beskonačno ;

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

Odgoda prije početka

Prema zadanim postavkama, reprodukcija počinje nakon što se stranica u potpunosti učita. Ovo se ponašanje može kontrolirati korištenjem svojstva odgode animacije. Njegova je vrijednost navedena u sekundama.

Smjer

Još jedno zanimljivo svojstvo je režija animacije. Prema zadanim postavkama postavljeno je na normalno; ako ga postavite na obrnuto, tada će se svi opisani okviri izvršiti u suprotnom smjeru. Provjerimo koja je razlika. Da bih to učinio, malo sam promijenio učinak dodavanjem još jednog okvira.

@keyframes pulse( 0%(veličina fonta: 50px;) 50%(veličina fonta: 60px;) 70%(veličina fonta: 80px;) 100%(veličina fonta: 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 polovici animacije veličina fonta će se povećati na 60 piksela, zatim će se ponovno naglo povećati, na 80, nakon čega će se vratiti na prvobitnu poziciju.

Riža. 2. Izvorna veličina teksta

Riža. 3. Veličina fonta je gotovo na kraju animacije, prije nego što se naglo vrati u prvobitno stanje.

Sada pitamo:

animacija-režija: obrnuto;

animacija - smjer : obrnuto ;

Sve se okrenulo naglavačke. Prvo će se tekst povećavati za čak 30 piksela, do 80, au ostatku animacije postupno će se smanjivati, da bi se na kraju vratio na prethodnu veličinu. Jednostavno je.

Forma za animaciju

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

Pozdrav prijatelji! Danas ćemo pogledati vrlo zanimljivu temu - stvaranje CSS animacija na stvarnom primjeru. Kulminacija ovog vodiča bit će stvaranje prekrasne CSS animacije logotipa od milijun dolara.

Cool

Mucanje

Materijali za lekciju

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

Malo teorije

Prije nego počnete stvarati animirani primjer, trebali biste proći kroz osnove CSS animacije, razmotriti osnovne pojmove, svojstva i pravila Izrada CSS-a animacije.

Ako ste već imali iskustva u izradi 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 i u 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 aplikacija, svoje CSS animacije stvarate pisanjem koda u editoru.

CSS pravilo @keyframes

Stvaranje CSS animacije počinje deklariranjem naziva animacije u bloku @ključni okviri i definiranje takozvanih koraka animacije ili ključnih okvira.

Za pregled teorije i osnova koristit ćemo se čistim CSS-om, a kasnije na složenijem primjeru koristit ćemo Sass pretprocesor. Više o Sassu možete naučiti u lekciji. Osim toga, za dublje razumijevanje osnova CSS-a, također preporučujem čitanje lekcija “Osnove CSS-a - Vodič za najmlađe” i “Svi CSS selektori u jednoj lekciji”

Pogledajmo strukturu @keyframes i rad s ključnim okvirima jednostavan primjer:

@keyframes turning ( 0% ( border-radius: 0 0 0 0; transform: rotate(0deg); ) 25% ( border-radius: 50% 0 0 0; transform: rotate(45deg); ) 50% ( border- radijus: 50% 50% 0 0; transformacija: rotacija(90deg); ) 75% (radijus granice: 50% 50% 50% 0; transformacija: rotacija(135deg); ) 100% (radijus granice: 50% 50 % 50% 50%; transformacija: rotacija (180 stupnjeva); ) )

U prvom retku vidimo da nakon ključna riječ@keyframes njegovo ime je "okretanje". Ovo je naziv bloka okvira, koji ćemo dalje spominjati.

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

Nadalje, ovaj blok koda s ključnim okvirima 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 objekt (u stvarnom životu to se radi paralelno ili čak nakon pristupa bloku s ključnim okvirima), možemo pristupiti našem novostvorenom bloku. Pogledajmo sljedeći jednostavan kod iz gornjeg primjera:

Div (širina: 120 px; visina: 120 px; boja pozadine: ljubičasta; margina: 100 px; animacija: okretanje 2 s lagano izbacivanje 1 s beskonačno naizmjenično; )

Ništa posebno do posljednjeg retka. Ovdje određujemo kako će objekt inicijalno izgledati, au zadnjem retku bloka referiramo se na blok ključnih okvira koji se naziva "okretanje":

Animacija: okretanje 2s ease-out 1s beskonačna alternativa;

Ako je s definicijom ključnih okvira sve relativno jasno, onda ovaj redak treba odmah objasniti. Kao što vidimo, prvo dolazi CSS svojstvo"animacija". Ovo je skraćeni oblik, kao što je svojstvo "margina: 20px 30px 40px 50px", koji se može podijeliti u nekoliko zasebnih svojstava:

Ovom analogijom, složeno svojstvo "animacija" može se podijeliti u nekoliko zasebnih svojstava:

ime-animacije	Naziv 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 mjerenja vremena animacije	Vremenska funkcija, dinamika kretanja predmeta ili promjene svojstava ( olakšati- (prema zadanim postavkama) animacija počinje polako, ubrzava se i završava polako; linearni- animacija se odvija ravnomjerno; ease-in- počinje polako i ubrzava prema zadnjem ključnom kadru; ease-out- brzo kreće i lagano usporava na kraju; ease-in-out- polako počinje i polako završava)
animacija-odgoda	Vrijeme odgode animacije PRIJE početka. Također navedeno u sekundama ili milisekundama
brojanje ponavljanja animacije	Broj ponavljanja (iteracija) animacije ( beskonačan- beskonačno, ili možete navesti jednostavan broj bez jedinica)
animacija-režija	Smjer animacije, sekvencijalno, obrnuto ili naprijed-natrag ( normalan- (prema zadanim postavkama) animacija se reproducira od početka do kraja i zaustavlja; naizmjenično- svira od početka do kraja i u suprotnom smjeru; naizmjenično-obrnuto- igra od kraja do početka i natrag; obrnuti- animacija se reproducira od kraja.)
animacija-play-state	Upravljanje reprodukcijom animacije ( zastao(pauza), trčanje(lansiranje), itd.). Može se primijeniti na: hover ili iz JS funkcije ako je potrebno
animation-fill-mode	Stanje elementa prije i nakon reprodukcije animacije. Na primjer, vrijednost unazad omogućuje vraćanje svih svojstava u izvorno stanje odmah nakon primjene animacije

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

animacija: (1. animation-name - naziv) (2. animation-duration - trajanje) (3. animation-timing-funkcija dinamike kretanja) (4. animation-delay - pauza prije početka) (5. animation-iteration- count - broj izvršenja) (6. animation-direction - smjer)

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

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

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

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

CSS3 animacija je prilično široko korištena. Vrijeme je da čak i najpočetniji graditelji web stranica shvate što je CSS animacija i kako je izraditi. Možda mislite da je CSS3 animacija usmjerena na pomicanje blokova i da izgleda poput crtića. Ali CSS animacija nije samo pomicanje elementa s jedne točke na drugu, već i iskrivljenje i druge transformacije. Da ovo bude jasno i početnicima, sve sam zapisao korak po korak.

1. Osnovna svojstva CSS3 animacije

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

• ime-animacije— jedinstveni naziv za animaciju (ključni okviri, o njima ćemo govoriti u nastavku).
• animacija-trajanje— trajanje animacije u sekundama.
• funkcija mjerenja vremena animacije— krivulja promjene brzine animacije. Na prvi pogled vrlo nejasno. Uvijek je lakše pokazati primjerom, a vidjet ćete ih u nastavku. Može poprimiti sljedeće vrijednosti: linearno | lakoća | olakšati | olakšanje | kubični-bezier(n,n,n,n) .
• animacija-odgoda— odgoda u sekundama prije početka animacije.
• brojanje ponavljanja animacije— broj ponavljanja animacije. Može se navesti jednostavno kao broj ili možete navesti beskonačno i animacija će se izvoditi beskrajno.

Ovdje su samo osnovna svojstva, koja su više nego dovoljna za stvaranje vaše prve CSS3 animacije.

Posljednje što trebamo znati i razumjeti iz teorije je kako stvoriti ključne okvire. To je također lako učiniti i radi se korištenjem pravila @keyframes, unutar kojeg su navedeni ključni okviri. Sintaksa za ovo pravilo je sljedeća:

Iznad smo postavili prvi i zadnji okvir. Sva međustanja će se izračunati AUTOMATSKI!

2. Primjer prave CSS3 animacije

Teorija je, kao i obično, dosadna i nije uvijek jasna. Puno je lakše sve vidjeti na stvarnom primjeru, ali najbolje je to učiniti sami na nekoj testnoj HTML stranici.

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

Evo što ćemo učiniti na primjer: neka nam je nekakav blok