Praksa razvoja web resursa dovela je do dva značajna trenda: brzine i ideje kvaliteta. Prvi obavezuje programera da brzo obavi svoj posao, drugi definiše granice onoga što je svrsishodno.

Posjetilac ima određen cilj kada posjećuje stranicu i vođen je općeprihvaćenim idejama o tome gdje se stvari nalaze i kako bi trebale funkcionirati. Programer može raditi svoj posao kako mu odgovara, ali ako je zainteresiran da privuče pažnju više posjetitelja, onda je neprimjereno ne uzeti u obzir njihovo mišljenje.

Sintaksa i semantika animacije

Svojstvo CSS animacije je jednostavno za korištenje i omogućava vam da brzo kreirate zanimljive efekte. Da bi se elementi web stranice ponašali na moderan način, kako posjetitelj očekuje, uopće nije potrebno biti posebno inventivni i osmisliti vlastite opcije animacije. Sve funkcionira po definiciji, kako se očekuje i zahtijeva.

Ovaj primjer opisuje dva elementa. Prvi je indikatorska traka koja se pomiče udesno i proporcionalno se povećava. Drugi element je slika koja se jednostavno pomiče udesno.

Ovdje nisu prikazani svi okviri. Imovina se u ovom slučaju implementira glatko. Posjetilac stranice uočava glatko kretanje s povećanjem volumena linije i kretanjem slike. Koristeći različite opcije pokreta umjesto tipa jednostavnog ulaska, možete kontrolirati kretanje. Opcija jednostavnog ulaska daje ubrzanje na početku i kočenje na kraju, ali možete odabrati drugu opciju kretanja.

Preklapanje i interakcija elemenata

Svi elementi koji imaju svojstvo animacije CSS tretira nezavisno jedan od drugog i od ukupnog toka stranice. Ako se elementi preklapaju jedan s drugim, onda se dobiva kombinacija efekata i kao rezultat novi efekat.

Ako tokom procesa animacije elementi mijenjaju svojstva, onda zbog zakona preklapanja boja možete dobiti vrlo originalne efekte sa samo dva ili tri elementa.

Dizajn elementa je od velike važnosti. U datom primjeru, traka je formirana od slike na kojoj su dvije linije različitih boja. Kada se veličina trake poveća, to je pila kada se kreće, to je pokretni val. Manipulirajući linijama i njihovim nagibom, možete kreirati efekte prema općim zakonima grafike.

Promjena vremena animacije također dovodi do nestandardnih rješenja. Korištenje svojstva transformacije, kao što je funkcija rotacije elementa, generiše originalne promjene. primjer:

Ovdje traka kontinuirano mijenja svoj izgled od neprozirnog do prozirnog. Donja slika mijenja samo oblik.

Animacija informacija

U CSS: tekstualna animacija ima posebno značenje. Tekst uvijek ima značenje i prisutan je na web stranici za određenu svrhu. Ali tekst je uvijek manje informativan od slike i zauzima puno prostora.

Garancija da će ispravno napisan tekst biti adekvatno percipiran od strane posjetitelja mnogo je veća od nade u ispravno razumijevanje slike, posebno kada dizajner stranice ima vlastitu ideju o oblicima izražavanja značenja.

Ako je ranije, kada je CSS animacija tek došla u svijet izgleda, puzajuće linije, trepćući satovi i pulsirajući tekstovi bili popularni, tada se u modernoj izradi web stranica smatra normalnim sljedeći princip: bez uznemiravanja posjetitelja, predstavite funkcionalnost web resursa što je moguće efikasnije.

U ovom kontekstu, bilo koji od gornjih primjera je pogodan za predstavljanje tekstualne informacije, ali opcija korištenja CSS-a kao 3D animacije je najpraktičnija.

Ovdje, u „normalnom“ stanju, tekst zauzima malo prostora. Možete istaknuti glavnu riječ ili naznačiti značenje. Čim miš udari u područje teksta, on se proširuje iz CSS 3D animacije u normalno čitljivo stanje.

Opcija za uštedu prostora u kombinaciji sa 3D dizajnom omogućava vam da kompaktno postavite informacije. Oslobođeni prostor se može koristiti u druge ili srodne svrhe. Zahvaljujući CSS animaciji, potrebne informacije će biti dostupne u pravo vrijeme.

Opcija animacije potrošača

Značajni uspjesi u kreiranju visokokvalitetnih web resursa i dalje ostavljaju jedno čudno postavljeno pitanje izvan razmatranja: zašto je dizajn web stranica briga programera?

Stranica nije umjetničko djelo ili rezultat kreativnog procesa u estetske svrhe. Web stranica je, prije svega, funkcionalnost koja će po mišljenju vlasnika (programera) na nju dovesti nove posjetitelje i pružiti mogućnost rada sa svojim klijentima.

Prodajte proizvod, pružite uslugu, obavite ovaj ili onaj posao... Posjetilac dolazi po robu, usluge i posao. Dizajn i animacija su važni, ali je ipak važnije mišljenje posjetitelja od mišljenja vlasnika (programera).

Ako je u običnoj trgovini kupac uvijek u pravu, zašto bi onda u online prodavnici trebao raditi sve onako kako je programer smislio kroz predloženu opciju dizajna? Animacija u kontekstu CSS-a je odličan alat, ali zašto ne otići malo dalje: koliko potrošača ima, toliko opcija za izražavanje funkcionalnosti i dizajna.

Opcija “animacija potrošača” je kada postoji ono što je programer predložio, i ono što su prethodni potrošači odabrali i što je sadašnji potrošač smislio.

Ova kolekcija sadrži najbolje i najkvalitetnije CSS karakteristike. Ovdje možete pronaći razne i zadivljujuće demo primjere i tehnike poznatih dizajnera i dizajnera izgleda koji pokušavaju dokazati da je sada moguće raditi gotovo sve koristeći samo čisti CSS. Ovdje možete pronaći i nekoliko lekcija koje vam detaljno govore kako napraviti takvu kreaciju. Nadam se da će vam ova zbirka biti od koristi.

CSS 3D oblaci

U ovoj demonstraciji moći ćete kreirati i uređivati ​​fensi oblake u 3D. Ovi CSS oblaci nam jasno pokazuju da su mogućnosti web tehnologija gotovo neograničene.

Čisti CSS logotipi

Ovo su primjeri logotipa napravljenih samo sa čistim CSS-om. Razmislite samo o tome, nikakve slike nisu korištene u njegovom stvaranju. To je samo nešto.

Abeceda sa CSS animacijom

Sjajan i umjetnički primjer korištenja CSS-a u abecedi

3D navigacija za sajt

Jednostavna, ali vrlo elegantna navigacijska traka za stranicu, naravno napravljena koristeći samo CSS3. nema slika ili skripti.

Google Doodle sa CSS-om

Jedan od mnogih crteža iz Google pretraživač, napravljen u CSS-u. Ovo je odličan primjer dobre upotrebe CSS animacije.

Klizač

Dobro napravljen i kvalitetan klizač za slike. Plus 4 primjera u demo.

Dvostruki animirani prsten

Prekrasan animirani prsten u više boja sa malo CSS koda

Zamagljivanje u CSS-u

Čini mi se veoma potreban filter, pogotovo jer je napravljen u čistom CSS-u. Koristeći zamućenje, možete skrenuti pažnju korisnika na određenu tačku.

Potpuni vodič za Flexbox

Ovaj članak je o responzivnim Flexbox blokovima. U potpunosti govori o ovim blokovima, iako je članak na engleskom.

Šareni i animirani meni pomoću CSS3

Prekrasan padajući meni za web stranicu sa ikonama. Veliki plus je što je u potpunosti napravljen u CSS-u.

CSS filteri

Visokokvalitetan materijal na engleskom jeziku koji opisuje aplikaciju CSS filteri na slike.

CSS forme

Post o CSS formama s brojnim primjerima

Trake napretka u CSS-u

Lekcija o tome kako kreirati elegantne trake napretka koristeći čisti CSS i animaciju. Također možete pogledati primjer i preuzeti izvore.

Animacija - Animate.css

Najpopularniji projekat CSS animacije na internetu danas. I vjerovatno najjednostavniji i najkvalitetniji, a i besplatan.

Svi moderni pretraživači, osim IE9, podržavaju CSS prelaze i CSS animacije, što vam omogućava da implementirate animaciju koristeći CSS, bez uključivanja JavaScripta. Animacija se odnosi na sve html elemente, kao i na pseudoelemente :prije I :posle

Podrška za pretraživač

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android pretraživač: 44, 4.1 -webkit-
Chrome za Android: 44

Da biste koristili animaciju u svom projektu, trebate samo učiniti dvije stvari:

1. Kreirajte samu animaciju koristeći ključnu riječ @keyframes
2. Povežite ga s elementom koji treba animirati i navedite potrebna svojstva.

@keyframes pravilo

Pravilo @keyframes omogućava vam da kreirate animaciju koristeći ključne okvire - stanja objekta u određenom trenutku.

Ključni okviri animacije se kreiraju pomoću ključnih riječi od I to(ekvivalentno vrijednostima 0% i 100%) ili korištenjem procentnih poena, kojih možete podesiti koliko god želite. Može se i kombinovati ključne riječi i procentnih poena.

Ako je početno ( od, 0%) ili konačno ( to, 100%) okvir, pretraživač će postaviti izračunate vrijednosti animiranih svojstava za njih kao što bi bile da animacija nije primijenjena.

Ako dva ključna kadra imaju iste selektore, sljedeći će poništiti prethodni.

Prilikom definiranja animacije odmah nakon svojstva @keyframes mora biti praćeno imenom ove animacije ( dato ime tada mora biti navedeno u svojstvu animacije elementa koji se animira).

@keyframes premjestiti ( from ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

@keyframes move ( od ( 50% { 100% { transformacija: translateX(0px);

Napravili smo animaciju koja funkcionira ovako:

1. Početak animacije ( od moglo je biti napisano 0%) — pozicija elementa duž X ose je 0px;
2. Sredina animacije (50%) - pozicija elementa duž X ose je 130px;
3. Kraj animacije ( to koristili smo 100%) - element vraćamo na početak animacije, tj. pozicija X-ose elementa je 0px;

Ovdje i ispod, radi praktičnosti, napisao sam u primjerima nekoliko redova JavaScripta koji će naizmjenično dodavati ili uklanjati klasu sa animacijom na elementu, tako da za reprodukciju animacije samo kliknite na ovaj element.

Ključni okviri se mogu grupisati:

@keyframes premjestiti ( from ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

@keyframes move ( od ( transformacija: translateX(0px); 25%, 50% { transform: translateX(130px); 100% { transformacija: translateX(0px);

Možete dodijeliti nekoliko animacija jednom elementu, njihova imena i parametri moraju biti napisani redoslijedom dodjeljivanja:

element (ime-animacije: animacija-1, animacija-2; trajanje-animacije: 2s, 4s; )

element( naziv-animacije: animacija-1, animacija-2; trajanje animacije: 2s, 4s;

Povezivanje animacije sa elementom vrši se pomoću dvije naredbe - naziv-animacije I animacija-trajanje.

Naziv animacije

Nekretnina naziv-animacije specificira naziv animacije. Preporučljivo je koristiti naziv koji odražava suštinu animacije, a možete koristiti jednu ili više riječi, međusobno povezane pomoću razmaka - ili donje crte _.

naziv-animacije: potez;

Funkcija vremena

Nekretnina funkcija vremena animacije omogućava vam da postavite posebnu funkciju odgovornu za brzinu reprodukcije animacije. Napominjemo da je brzina reprodukcije animacije najčešće nelinearna, tj. njegova trenutna brzina u različitim područjima će se razlikovati. On trenutno Postoji nekoliko već ugrađenih argumenata za ovo pravilo: lakoća, ease-in, ease-out , lakoća ulaska, linearno , korak-start , step-end.

Međutim, takve funkcije možete kreirati sami. Posebna funkcija kubni-bezier(P1x, P1y, P2x, P2y); uzima četiri argumenta i gradi krivulju raspodjele vrijednosti na osnovu njih tokom procesa animacije. Možete vježbati kreiranje vlastitih funkcija i vidjeti kako one rade na ovoj stranici.

Konačno, animacija se može pretvoriti u skup diskretnih vrijednosti pomoću funkcije stepenice(broj koraka, smjer), čiji argumenti određuju broj njegovih koraka i smjer koji može imati vrijednosti start ili kraj .

• lakoća- zadana funkcija, animacija počinje polako, brzo se ubrzava i usporava na kraju. Odgovara kubnom-bezieru (0.25,0.1,0.25,1).
• linearno— animacija se odvija ravnomjerno kroz cijelo vrijeme, bez fluktuacija u brzini; odgovara kubnom-bezieru (0,0,1,1).
• ease-in— animacija počinje polako, a zatim se glatko ubrzava na kraju; odgovara kubnom-bezieru (0.42,0,1,1).
• ease-out— animacija počinje brzo i glatko se usporava na kraju; odgovara kubnom-bezieru (0,0,0,58,1).
• lakoća ulaska— animacija počinje polako i polako se završava; odgovara kubnom-bezieru (0,42,0,0,58,1).
• kubni-bezier(x1, y1, x2, y2)- vidi gore.
• naslijediti— nasljeđuje ovo svojstvo od roditeljskog elementa.

Vizuelno poređenje

Animacija sa zakašnjenjem

Nekretnina animacija-kašnjenje definira kašnjenje prije početka reprodukcije animacije, postavljeno u sekundama ili milisekundama. Negativno kašnjenje pokreće animaciju od određene tačke unutar njenog ciklusa, tj. od vremena navedenog u kašnjenju. Ovo vam omogućava da primijenite animaciju na više fazno pomaknutih elemenata promjenom samo vremena kašnjenja. Ako želite da animacija počne od sredine, postavite negativnu odgodu koja je jednaka polovini postavljenog vremena animacija-trajanje. Nije naslijeđen.

element (ime animacije: animacija-1; trajanje animacije: 2 s; kašnjenje animacije: 10 s; // 10 sekundi će proći prije nego što ova animacija počne)

Ponovite animaciju

Nekretnina broj iteracija animacije omogućava vam da pokrenete animaciju nekoliko puta. Nije naslijeđen. Postavite vrijednost na bilo koju pozitivnu vrijednost 1, 2, 3 … itd. ili beskonačan za beskonačno ponavljanje. Značenje 0 ili bilo koji negativan broj uklanja animaciju iz reprodukcije.

Nedavno smo to vidjeli tranzicije- To je samo način animacije svojstva stila iz original to final stanje.

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

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

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čine?
• imitirati razne vremenske funkcije za različite nekretnine?

Animacija u CSS-u vam omogućava da uradite sve ovo i više.

Animacija je poput mini filma, gdje vi, kao režiser, dajete uputstva (pravila stila) svojim glumcima ( HTML elementi) za različite scene (ključni okviri).

Animation Properties

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

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

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 kubnog beziera (0,1,0,25,0,1,1) 0s beskonačno naizmjenično; )

Prvo morate napisati stvarnu animaciju odbijanja koristeći @keyframes i nazvati 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 (igra se beskonačno)
• smjer animacije: naizmjenični (ide naprijed-nazad)
• animation-fill-mode: oba

@keyframes

Prije primjene animacije na HTML elemente, trebate napisati animaciju koristeći ključne kadrove. Generalno, ključni okviri su svaki međukorak u animaciji. Oni se određuju korištenjem postotaka:

• 0% - prvi korak animacije;
• 50% je polovina koraka 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 koristeći @keframes ;
• at koristiti animacija koristeći svojstvo ime-animacije (ili svojstvo stenografije animacije).

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

Slično imenima CSS klasa, ime animacije može uključivati ​​samo:

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

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

animacija-trajanje

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 nema animacije.

funkcija vremena animacije

Slično funkcijama za mjerenje vremena prijelaza, mogu se koristiti funkcije mjerenja vremena animacije ključne riječi, kao što su linearni , ease-out ili se mogu definirati pomoću proizvoljnih 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 funkcija vremena i simulirati određena Bezierova kriva definisanjem mnoge vrlo specifične ključni okviri. Pogledajte Bounce.js za naprednu animaciju.

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 kašnjenja bilo koje vrste.

Korisno kada uključujete više animacija u a serija.

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

broj iteracija animacije

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

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

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

animation-direction

Svojstvo animation-direction specificira da li kojim redosledom ključni okviri se čitaju.

• normalno : počinje na 0%, završava na 100%, ponovo počinje na 0%.
• obrnuto: počinje sa 100%, završava sa 0%, počinje sa 100% ponovo.
• alternativna : počinje sa 0%, ide na 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 broj iteracija animacije postavljen na beskonačan.

animacija-fill-mode

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

Prilikom utvrđivanja ključni okviri može se specificirati CSS pravila, koji će se primjenjivati ​​u različitim koracima animacije. Sada ova CSS pravila mogu sudarati sa onima koji već primijenjeno na animirane elemente.

animation-fill-mode vam omogućava da kažete pretraživaču da li stilove animacije Također mora se primijeniti izvan animacije.

Hajde da zamislimo dugme, što je:

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

CSS animacije omogućavaju animiranje prijelaza iz jedne konfiguracije CSS stila u drugu. Animacije se sastoje od dvije komponente, stila koji opisuje CSS animaciju i skupa ključnih kadrova koji ukazuju na početno i krajnje stanje stila animacije, kao i moguće međutačke.

Postoje tri ključne prednosti CSS animacija u odnosu na tradicionalne tehnike animacije vođene skriptama:

1. Lako ih je koristiti za jednostavne animacije; možete ih kreirati bez potrebe da znate JavaScript.
2. Animacije rade dobro, čak i pod umjerenim opterećenjem sistema. Jednostavne animacije često mogu biti loše u JavaScriptu (osim ako nisu dobro napravljene). Mašina za renderovanje može koristiti preskakanje okvira i druge tehnike kako bi performanse bile što glatkije.
3. Omogućavanje pretraživaču da kontroliše sekvencu animacije omogućava pretraživaču da optimizuje performanse i efikasnost, na primer, smanjenjem učestalosti ažuriranja animacija koje se pokreću na karticama koje trenutno nisu vidljive.

Konfigurisanje animacije

Da biste kreirali sekvencu CSS animacije, stilizujete element koji želite da animirate sa svojstvom animacije ili njegovim pod-svojstvima. Ovo vam omogućava da konfigurirate vrijeme, trajanje i druge detalje o tome kako bi sekvenca animacije trebala napredovati. Ovo radi ne konfigurišite stvarni izgled animacije, što se radi pomoću at-pravila @keyframes kao što je opisano u nastavku.

animation-name Određuje ime @keyframes at-pravila koje opisuje ključne kadrove animacije.

animation-duration Konfiguriše dužinu vremena koje animaciji treba da završi jedan ciklus.

animation-timing-function Konfigurira vrijeme animacije; odnosno kako animacija prelazi kroz ključne kadrove, uspostavljanjem krivulja ubrzanja.

animation-delay Konfigurira kašnjenje između vremena učitavanja elementa i početka sekvence animacije. animation-iteration-count Konfigurira koliko puta bi se animacija trebala ponoviti; možete odrediti beskonačno da ponavljate animaciju beskonačno.

animation-direction Konfigurira da li animacija treba mijenjati smjer prilikom svakog prolaska kroz sekvencu ili se vraća na početnu točku i ponavlja se.

animation-fill-mode Konfigurira koje se vrijednosti primjenjuju na animaciju prije i nakon njenog izvršavanja.

animation-play-state Omogućuje vam da pauzirate i nastavite sekvencu animacije. Definiranje sekvence animacije pomoću ključnih kadrova

Nakon što ste konfigurirali vrijeme animacije, morate definirati izgled animacije. Ovo se radi uspostavljanjem dva ili više ključnih kadrova koristeći @keyframes at-pravilo. Svaki ključni kadar opisuje kako animirani element treba da se prikaže u datom trenutku tokom sekvence animacije.

Budući da je vrijeme animacije definirano u CSS stilu koji konfigurira animaciju, ključni kadrovi koriste CSS tip podataka koji predstavlja vrijednost u procentima. Često se koristi za definiranje veličine kao relativne u odnosu na roditeljski objekt elementa. brojna svojstva mogu koristiti procente kao što su širina i visina margine i veličina fonta.>

@keyframes slidein ( od ( margina-lijevo: 100%; širina: 300%; ) do ( margin-lijevo: 0%; širina: 100%; ) )

Gusjenica i Alisa su se gledale neko vrijeme u tišini: na kraju je Gusjenica izvadila nargilu iz usta i obratila joj se mlitavim, pospanim glasom.

Korištenje stenografije animacije

Skraćenica animacije je korisna za uštedu prostora. Kao primjer, pravilo koje smo koristili u ovom članku:

P ( trajanje animacije: 3 s; naziv animacije: slidein; broj iteracija animacije: beskonačan; pravac animacije: alternativni; )

Može se zamijeniti

P (animacija: 3s beskonačno alternativno slajdovanje; )

Postavljanje više vrijednosti svojstava animacije

Vrijednosti dugoročnih CSS animacija mogu prihvatiti više vrijednosti, odvojenih zarezima - ova funkcija se može koristiti kada želite primijeniti više animacija u jednom pravilu i postaviti odvojena trajanja, broj ponavljanja itd. za različite animacije. Pogledajmo nekoliko brzih primjera da objasnimo različite permutacije:

U ovom prvom primjeru imamo tri postavljena imena animacije, ali samo jedno trajanje i broj ponavljanja. U ovom slučaju sve tri animacije imaju isto trajanje i broj ponavljanja:

Animation-name: fadeInOut, moveLeft300px, bounce; animacija-trajanje: 3s; broj iteracija animacije: 1;

U ovom drugom primjeru imamo tri vrijednosti postavljene na sva tri svojstva. U ovom slučaju svaka animacija se pokreće s odgovarajućim vrijednostima na istoj poziciji na svakom svojstvu, tako na primjer fadeInOut ima trajanje od 2,5 s i broj iteracija od 2, itd.

Animation-name: fadeInOut, moveLeft300px, bounce; animacija-trajanje: 2.5s, 5s, 1s; animacija-iteracija-broj: 2, 1, 5;

U ovom trećem slučaju, navedene su tri animacije, ali se računaju samo dva trajanja i iteracija. U takvim slučajevima kada ih ima nije dovoljno vrijednosti za davanje posebne vrijednosti svakoj animaciji, vrijednosti se kreću od početka do kraja. Tako, na primjer, fadeInOut dobiva trajanje od 2,5 s, a moveLeft300px dobiva trajanje od 5 s. Sada smo došli do kraja dostupnih vrijednosti trajanja, tako da počinjemo ponovo od početka - odskakanje stoga dobiva trajanje od 2,5 s. Broj iteracija (i sve druge vrijednosti svojstva koje navedete) bit će dodijeljeni na isti način.

Animation-name: fadeInOut, moveLeft300px, bounce; animacija-trajanje: 2.5s, 5s; animacija-iteracija-broj: 2, 1;

Korištenje događaja animacije

Možete dobiti dodatnu kontrolu nad animacijama - kao i korisne informacije o njima - korištenjem događaja animacije. Ovi događaji, predstavljeni objektom AnimationEvent, mogu se koristiti za otkrivanje kada animacije počinju, završavaju i započinju novu iteraciju. Svaki događaj uključuje vrijeme u kojem se dogodio, kao i naziv animacije koja je pokrenula događaj.

Izmijenit ćemo primjer kliznog teksta kako bismo izbacili neke informacije o svakom događaju animacije kada se dogodi, tako da možemo vidjeti kako funkcioniraju.

Dodavanje CSS-a

Počinjemo sa kreiranjem CSS-a za animaciju. Ova animacija će trajati 3 sekunde, zvati će se "slidein", ponoviti 3 puta i svaki put mijenjati smjer. U @keyframes, širina i margina-leva se manipulišu kako bi element klizio po ekranu.

Slidein ( trajanje animacije: 3 s; naziv animacije: slidein; broj iteracija animacije: 3; smjer animacije: alternativni; ) @keyframes slidein ( od ( margina-lijevo: 100%; širina: 300%)) do ( margina -lijevo:0% širina:100%;

Dodavanje slušalaca događaja animacije

Koristit ćemo JavaScript kod za slušanje sva tri moguća događaja animacije. Ovaj kod konfigurira naše slušaoce događaja; mi to zovemo kada se dokument prvi put učita da bi se stvari podesile.

Var element = document.getElementById("watchme"); element.addEventListener("animationstart", slušalac, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", slušalac, false); element.className = "slidein";

Ovo je prilično standardni kod; možete dobiti detalje o tome kako radi u dokumentaciji za eventTarget.addEventListener() . Posljednja stvar koju ovaj kod radi je postavljanje klase na elementu koji ćemo animirati na “slidein”; to radimo da pokrenemo animaciju.

Zašto? Zato što se događaj animationstart pokreće čim animacija počne, au našem slučaju, to se dešava prije nego što se naš kod pokrene. Stoga ćemo sami započeti animaciju postavljanjem klase elementa na stil koji se animira nakon činjenice.

Prijem događaja

Događaji se isporučuju funkciji listener(), koja je prikazana ispod.

Slušalac funkcije(događaj) ( var l = document.createElement("li"); switch(event.type) ( case "animationstart": l.innerHTML = "Započeto: proteklo vrijeme je " + event.elapsedTime; prekid; slučaj " animationend": l.innerHTML = "Završeno: proteklo vrijeme je " + event.elapsedTime; prekid; slučaj "animationiteration": l.innerHTML = "Nova petlja je počela u vrijeme " + event.elapsedTime; prekid; ) document.getElementById(" izlaz").appendChild(l); )

I ovaj kod je vrlo jednostavan. Jednostavno gleda event.type da odredi koja se vrsta događaja animacije dogodila, a zatim dodaje odgovarajuću napomenu elementu koji predstavlja neuređenu listu stavki, obično prikazanu kao lista sa nabrajanjem.">

(neuređena lista) koristimo za evidentiranje ovih događaja.

Izlaz, kada je sve rečeno i urađeno, izgleda otprilike ovako:

• Započeto: proteklo vrijeme je 0
• Nova petlja je započela u vremenu 3.01200008392334
• Nova petlja je započela u vremenu 6.00600004196167
• Završeno: proteklo vrijeme je 9.234000205993652

Imajte na umu da su vremena vrlo blizu, ali ne baš, očekivanim s obzirom na vrijeme utvrđeno kada je animacija konfigurirana. Imajte na umu da se nakon završne iteracije animacije događaj iteracije animacije ne šalje; umjesto toga, šalje se događaj animationend.

HTML

Čisto radi kompletnosti, evo HTML-a koji prikazuje sadržaj stranice, uključujući listu u koju skripta ubacuje informacije o primljenim događajima:

Gledaj kako se krećem

Ovaj primjer pokazuje kako koristiti CSS animacije za izradu H1 elementi se kreću po stranici.

Osim toga, svaki put kada se pokrene događaj animacije, pišemo neki tekst, tako da ih možete vidjeti u akciji.

A evo i live izlaza.

Napomena: Ponovo učitajte stranicu da vidite animaciju ili kliknite na dugme CodePen da vidite animaciju u okruženju CodePen.

Facebook
Twitter
VKontakte
Google+
Kako raditi