Animiranje sučelja pomoću CSS-a. CSS animacija za najmlađe Css nekoliko animacija

). CSS3 nam pruža još jedan moćniji alat za animaciju koji nadilazi samo jedan prijelaz i omogućuje nam stvaranje neograničen broj takvih prijelaza.

Drugim riječima, animacija nam omogućuje da se pomaknemo iz jedan stanje (skup svojstava) do drugi, od drugi Do treći, pa čak i ako je potrebno reproducirajte animaciju obrnutim redoslijedom kada se broj prijelaza završi.

Slično efektima prijelaza, da bi se animacija pokrenula, morate pokrenuti njezinu reprodukciju, bilo to kada se stranica prvi put učita ili kada element dobije fokus, kada pokazivač miša lebdi iznad elementa i tako dalje.

Faze izrade animacije

Pogledajmo od čega se sastoji proces stvaranja animacije u CSS-u. Prvo morate definirati ključne kadrove animacije. Što je ključni okvir? Zamislite element koji je pozicioniran lijevo od prozora preglednika i trebate ga animirati u sredinu prozora i vratiti ga u prvobitni položaj. Za ovu animaciju potrebna su nam tri ključna kadra:

• Prvi– definira početnu poziciju elementa.
• Drugi– određuje položaj elementa nakon pomicanja elementa u sredinu prozora.
• Treći– definira krajnju točku animacije (početnu poziciju elementa).

Nakon što su definirani potrebni ključni okviri, na pregledniku korisnika bit će da iscrta sve međufaze koje smo definirali pomoću ključnih okvira. To jest, zadatak crtanja elementa u tim intervalima leži isključivo na našem pregledniku, mi samo trebamo specificirati te točke animacije, ili drugim riječima, moramo reći pregledniku kako se treba mijenjati iz jednog stila u drugi; između ključnih okvira.

Sljedeći korak je dodijeliti animaciju elementu ili elementima koji nas zanimaju. U tom slučaju moguće je odrediti pojedinačne postavke animacije za svaki element.

Kasnije u ovom članku ćemo detaljno pogledati kako postaviti odgodu animacije, kako postaviti broj ciklusa animacije, postaviti njeno trajanje, naznačiti njenu brzinu i smjer, stanje animacije u trenutnom trenutku, pa čak i odrediti stil za element u vrijeme kada se animacija ne reproducira.

Prije nego što prijeđemo na stvaranje animacija, želio bih vam skrenuti pozornost na trenutnu podršku za svojstva animacije u preglednicima:

Definiranje ključnih okvira

Rezultat našeg primjera:

Razmotrimo sljedeći primjer u kojem ćemo izraditi nekoliko različitih animacija i dodijeliti ih jednom elementu.

U ovom smo primjeru izradili nekoliko animacija u kojima se širina elementa postupno povećava, boja pozadine se mijenja, a element se naginje negativno u odnosu na svoju os x(horizontalna os) do sredine animacije i smanjivanje elementa na originalnu veličinu elementa prema kraju animacije, što je popraćeno promjenom boje pozadine i nagibom elementa duž osi x obrnuto.

Rezultat našeg primjera:

Broj ciklusa animacije

Prema zadanim postavkama, reproducirati će se bilo koja animacija u CSS-u samo jednom. Zahvaljujući svojstvu animation-iteration-count, moći ćemo odrediti koliko će se puta petlja animacije reproducirati, to može biti proizvoljan broj puta, ili možemo naznačiti da će se animacija reproducirati neograničeno dugo, u nekim slučajevima ovo vrlo je koristan.

Imajte na umu da zabranjeno je označavati negativne vrijednosti iz objektivnih razloga, ali je dopušteno navesti necijele vrijednosti, u kojem slučaju će se reproducirati samo dio ciklusa animacije - proporcionalno navedenoj vrijednosti (na primjer, vrijednost 1.5 odgovara reprodukciji animacijskog ciklusa jedan i pol puta).

Razmotrite sljedeći primjer:

U ovom smo primjeru stvorili jednostavna animacija, u kojem sa koristeći CSS top svojstva pomiču elemente s relativnim pozicioniranjem u odnosu na gornji rub trenutne pozicije, dok mijenjaju boju pozadine elementa.

Pozdrav prijatelji! Danas ćemo pogledati vrlo zanimljivu temu - stvaranje CSS animacija na stvarnom primjeru. Kulminacija ove lekcije bit će stvaranje prekrasan CSS animacija logotipa od milijun dolara.

Cool

Mucanje

Materijali za lekcije

• 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 imate iskustva u stvaranju animacija u bilo kojoj aplikaciji, kao što je Adobe After Effects ili zastarjeli Flash Professional (sada Adobe Animate), trebali biste biti upoznati s konceptima kao što su "Ključni okviri", "Vremenske funkcije ili dinamika kretanja" ", koji su, kao i u bilo kojem drugom području ​​animacije, primjenjivi i 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: zakretanje (90 stupnjeva); 75% (radijus granice: 50% 50% 50% 0; transformacija: zakretanje (135 stupnjeva); ) 100% (radijus granice: 50% 50 % 50% 50%; transformacija: zakreni (180 stupnjeva);

U prvom retku vidimo da iza ključne riječi @keyframes stoji njen naziv “okretanje”. Ovo je naziv bloka okvira, koji ćemo dalje spominjati.

Nakon deklaracije otvara se vitičasta zagrada (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.

Ovaj blok koda s ključnim okvirima može se zatim primijeniti na bilo koji CSS birač, ali najčešće su pripremljeni za točno 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 2s lagano izbacivanje 1s 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:

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).

Što smo bliže sučelju koje počinje raditi, to postaje razumljivije za korisnika. U životu se gotovo ništa ne događa trenutno - kad otvorimo limenku soda 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 čini web stranice dinamičnijima 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 animacija-test (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: 3 s; odgoda-animacije: 2 s; /* 2 sekunde će proći prije nego što animacija počne */ )

Ponovno reproduciraj animaciju:

Pomoću 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 zadnjeg.

Pokretanje i zaustavljanje animacije:

Ovo 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, lakoća ulaska, laganost van, laganost ulaska, 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 posljednji 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, korištenjem računalne snage GPU-a, omogućuje preglednicima da brzo optimiziraju brzinu renderiranja elemenata.

Drugo, fleksibilnost, brzina i jednostavnost CSS implementacija animacije će pomoći "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 :)

CSS3 animacija Daje stranicama dinamičnost. Oživljava web stranice, poboljšavajući korisničko iskustvo. Za razliku od CSS3 prijelaza, stvaranje animacije temelji se na ključnim kadrovima, koji vam omogućuju automatsku reprodukciju i ponavljanje efekata za određeno vrijeme, kao i zaustavljanje animacije unutar petlje.

CSS3 animacija može se koristiti za gotovo sve html elemente, kao i za pseudo-elemente:before i:after. Popis animiranih svojstava dan je na stranici. Prilikom izrade animacije ne zaboravite na mogući problemi s performansama, jer promjena nekih svojstava zahtijeva mnogo resursa.

Uvod u CSS animaciju

Podrška za preglednik

IE: 10.0
Firefox: 16,0, 5,0 -moz-
Krom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android preglednik: 44, 4.1 -webkit-
Chrome za Android: 44

1. Ključni okviri

Ključni okviri koriste se za određivanje vrijednosti svojstava animacije u različitim točkama animacije. Ključni okviri definiraju ponašanje jednog ciklusa animacije; animacija se može ponoviti nula ili više puta.

Ključni okviri navedeni su pomoću pravila @keyframes, definiranog na sljedeći način:

@keyframes naziv animacije (popis pravila)

Stvaranje animacije počinje instalacijom ključni okviri@keyframes pravila. Okviri određuju koja će svojstva biti animirana u kojem koraku. Svaki okvir može uključivati ​​jedan ili više blokova deklaracije jednog ili više parova svojstava i vrijednosti. Pravilo @keyframes sadrži naziv animacije elementa, koja povezuje pravilo i blok deklaracije elementa.

@keyframes shadow ( from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) do (text-shadow: 0 0 3px black;) )

Ključni okviri izrađuju se pomoću ključne riječi od i do (ekvivalentno vrijednostima 0% i 100%) ili korištenjem postotnih bodova, kojih možete postaviti koliko god želite. Također možete kombinirati ključne riječi i postotke. Ako okviri imaju ista svojstva i vrijednosti, mogu se kombinirati u jednu deklaraciju:

@keyframes pomicanje (od, do (gore: 0; lijevo: 0; ) 25%, 75% (gore: 100%;) 50% (gore: 50%;) )

Ako okviri od 0% ili 100% nisu navedeni, korisnički preglednik ih stvara pomoću izračunatih (izvorno postavljenih) vrijednosti animiranog svojstva.

Ako je definirano više pravila @keyframes s istim nazivom, aktivirat će se zadnje u redoslijedu dokumenta, a sva prethodna će se zanemariti.

Nakon što je pravilo @keyframes deklarirano, možemo ga referencirati u svojstvu animacije:

H1 (veličina fonta: 3,5em; boja: tamnocrvena; animacija: sjena 2s beskonačno lagano uvlačenje; )

Ne preporučuje se animirati nenumeričke vrijednosti (uz rijetke iznimke), jer rezultat u pregledniku može biti nepredvidiv. Također ne biste trebali stvarati ključne okvire za vrijednosti svojstava koje nemaju središnju točku, kao što su vrijednosti svojstva color: pink i color: #ffffff, width: auto i width: 100px ili border-radius: 0 i border- polumjer: 50% (u ovom slučaju bilo bi ispravno navesti border-radius: 0%).

1.1. Funkcija mjerenja vremena za ključne kadrove

Pravilo stila ključne slike također može deklarirati privremenu funkciju koja bi se trebala koristiti kada se animacija pomakne na sljedeću ključnu sličicu.

Primjer

@keyframes bounce ( from ( top: 100px; animation-timing-function: ease-out; ) 25% ( top: 50px; animation-timing-function: ease-in; ) 50% ( top: 100px; animation-timing- function: ease-out;) 75% (top: 75px; animation-timing-function: ease-in; ) do (top: 100px; ) )

Za animaciju pod nazivom "odbijanje" specificirano je pet ključnih kadrova. Između prvog i drugog ključnog kadra (tj. između 0% i 25%) koristi se funkcija ublažavanja. Između drugog i trećeg ključnog kadra (tj. između 25% i 50%) koristi se funkcija glatkog ubrzanja. I tako dalje. Element će se pomaknuti prema gore po stranici za 50 piksela, usporavajući kada dosegne svoju najvišu točku, a zatim se ubrzava kada padne na 100 piksela. Druga polovica animacije ponaša se slično, ali samo pomiče element 25px prema gore po stranici.

Funkcija mjerenja vremena navedena u ključnom kadru do ili 100% se zanemaruje.

2. Naziv animacije: svojstvo naziva animacije

Svojstvo animation-name specificira popis animacija primijenjenih na element. Svaki naziv koristi se za odabir ključnog okvira u pravilu koje daje vrijednosti svojstava za animaciju. Ako naziv ne odgovara nijednom ključnom kadru u pravilu, nema svojstava za animaciju ili nema naziva animacije, animacija se neće izvršiti.

Ako više animacija pokuša promijeniti isto svojstvo, izvršit će se animacija najbliža kraju popisa naziva.

Naziv animacije razlikuje velika i mala slova i ključna riječ none nije dopuštena. Preporučljivo je koristiti naziv koji odražava bit animacije, a možete koristiti jednu ili više riječi navedenih s crticom - ili znakom podvlake _.

Imovina se ne nasljeđuje.

Sintaksa

Naziv animacije: nijedan; ime-animacije: test-01; ime-animacije: -klizanje; ime-animacije: kreće se okomito; ime-animacije: test2; ime-animacije: test3, potez4; ime-animacije: početno; naziv-animacije: naslijediti;

3. Trajanje animacije: svojstvo trajanja animacije

Svojstvo animation-duration specificira trajanje jednog ciklusa animacije. Navedeno u sekundama s ili milisekundama ms. Ako element ima više od jedne specificirane animacije, možete postaviti različito vrijeme za svaku navođenjem vrijednosti odvojenih zarezima.

Imovina se ne nasljeđuje.

Sintaksa

Trajanje animacije: 0,5s; animacija-trajanje: 200ms; animacija-trajanje: 2s, 10s; animacija-trajanje: 15s, 30s, 200ms;

4. Funkcija mjerenja vremena: svojstvo funkcije vremenskog mjerenja animacije

Svojstvo animation-timing-function opisuje kako će animacija napredovati između svakog para ključnih kadrova. Tijekom odgode animacije, funkcije mjerenja vremena se ne primjenjuju.

Imovina se ne nasljeđuje.

Sintaksa

Funkcija mjerenja vremena animacije: lakoća; animacija-tempiranje-funkcija: ease-in; funkcija mjerenja vremena animacije: popuštanje; funkcija-određivanja vremena animacije: lagano ulazak-izlazak; funkcija mjerenja vremena animacije: linearna; funkcija mjerenja vremena animacije: početak koraka; funkcija-određivanja vremena animacije: kraj koraka; funkcija-tempiranja-animacije: cubic-bezier(0.1, 0.7, 1.0, 0.1); funkcija-tempiranja-animacije: koraci(4, kraj); funkcija mjerenja vremena animacije: jednostavnost, početak koraka, kubni bezier (0,1, 0,7, 1,0, 0,1); funkcija-tempiranja-animacije: početna; funkcija-određivanja vremena animacije: naslijediti;

Pomoću animacije korak po korak možete stvoriti zanimljive efekte, poput ispisa teksta ili indikatora učitavanja.

5. Ponavljanje animacije: animation-iteration-count svojstvo

Svojstvo animation-iteration-count određuje koliko se puta ponavlja petlja animacije. Početna vrijednost od 1 znači da će se animacija jednom reproducirati od početka do kraja. Ovo se svojstvo često koristi u kombinaciji s alternativnom vrijednošću svojstva animation-direction, što uzrokuje reprodukciju animacije obrnutim redoslijedom u alternativnim petljama.

Imovina se ne nasljeđuje.

Sintaksa

Animation-iteration-count: beskonačno; broj ponavljanja animacije: 3; broj ponavljanja animacije: 2,5; broj ponavljanja animacije: 2, 0, beskonačno;

6. Smjer animacije: svojstvo smjera animacije

Svojstvo animation-direction određuje hoće li se animacija reproducirati obrnutim redoslijedom u nekim ili svim petljama. Kada se animacija reproducira obrnutim redoslijedom, funkcije mjerenja vremena također su obrnute. Na primjer, kada se igra obrnutim redoslijedom, funkcija ease-in ponašat će se kao ease-out.

Imovina se ne nasljeđuje.

Da biste odredili je li ponavljanje petlje animacije parno ili neparno, broj ponavljanja počinje od 1.

Sintaksa

Animacija-režija: normalna; animacija-režija: obrnuto; animacija-smjer: naizmjenično; animacija-smjer: naizmjenično-obrnuto; animacija-smjer: normalno, obrnuto; smjer animacije: naizmjenično, obrnuto, normalno; animacija-režija: početna; animacija-smjer: naslijediti;

7. Reprodukcija animacije: svojstvo animation-play-state

Svojstvo animation-play-state određuje hoće li se animacija pokrenuti ili pauzirati. Zaustavljanje animacije unutar petlje moguće je korištenjem ovog svojstva u JavaScript skripti. Također možete zaustaviti animaciju kada prijeđete mišem iznad objekta - stanje:lebdjenje.

Imovina se ne nasljeđuje.

Sintaksa

Stanje reprodukcije animacije: trčanje; animation-play-state: paused; animation-play-state: pauzirano, pokrenuto, pokrenuto; animation-play-state: početno; animation-play-state: naslijediti;

8. Odgoda animacije: svojstvo odgode animacije

Svojstvo animation-delay određuje kada će animacija početi. Navedeno u sekundama s ili milisekundama ms.

Imovina se ne nasljeđuje.

Sintaksa

Kašnjenje animacije: 5s; odgoda animacije: 3s, 10ms;

9. Stanje elementa prije i nakon reprodukcije animacije: svojstvo animation-fill-mode

Svojstvo animation-fill-mode određuje koje će vrijednosti animacija primijeniti izvan vremena izvođenja. Kada animacija završi, element se vraća na svoje originalne stilove. Prema zadanim postavkama, animacija ne utječe na vrijednosti svojstava kada se animacija primjenjuje na element - animation-name i animation-delay. Osim toga, prema zadanim postavkama animacije ne utječu na vrijednosti svojstava animation-duration i animation-iteration-count nakon što su dovršene. Svojstvo animation-fill-mode može nadjačati ovo ponašanje.

Imovina se ne nasljeđuje.

Sintaksa

Animation-fill-mode: ništa; animation-fill-mode: naprijed; animation-fill-mode: unatrag; animation-fill-mode: oboje; animation-fill-mode: ništa, unatrag; animation-fill-mode: oboje, naprijed, ništa;

10. Kratak opis animacije: svojstvo animacije

Svi parametri reprodukcije animacije mogu se kombinirati u jednom svojstvu - animation , navodeći ih razdvojene razmakom:
animacija: naziv-animacije animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Za reprodukciju animacije dovoljno je navesti samo dva svojstva - naziv-animacije i trajanje-animacije , preostala svojstva će imati svoje zadane vrijednosti. Redoslijed kojim su svojstva navedena nije bitan, jedina stvar je da vrijeme izvršenja animation-duration mora biti prije odgode animation-delay.

11. Višestruke animacije

Za jedan element možete postaviti nekoliko animacija, navodeći njihove nazive odvojene zarezima:

Div (animacija: sjena 1s lagano ulaženje-izlazak 0,5s naizmjenično, pomicanje 5s linearno 2s;)

Možete kontrolirati trajanje animacije, ponavljanje, smjer, vrstu kretanja i korake. Možete animirati bilo koji element, uključujući pseudo-elemente.

Preduvjet je prisutnost određenih vrijednosti. Svojstva postavljena na automatski nisu animirana.

Safari trenutno ne podržava animacije pseudo elemenata, molimo koristite druge preglednike za pregled unosa.

Primjer CSS animacije:

Primjer koda animacije:

@keyframes pomicanje ( 40% ( lijevo: 50%; dolje: 75%; funkcija-vremena-animacije: lagano uvlačenje; ) 80% ( lijevo: 90%; dolje: -10em; ) )

Povezivanje animacije:

Sunce ( animacija: pomakni se 15 s beskonačno linearno; )

potez - naziv animacije 15s - trajanje beskonačno - beskonačno ponavljanje linearno - tip pokreta

@ključni okviri

Sama animacija postavljena je unutar bloka @keyframes. Nakon @keyframes postavlja se naziv animacije, a zatim unutra vitičaste zagrade- njezini koraci.

Koraci se mogu odrediti pomoću postotaka ili pomoću ključnih riječi od i do. U ovom slučaju možete promijeniti vrstu animacije u koracima (funkcija-vremena-animacije):

Naziv animacije

Koristi se za postavljanje naziva animacije.

Moguće vrijednosti: jedan ili više naziva animacije. Zadana vrijednost: ništa.

naziv-animacije: pomakni se; - jedna animacija. naziv-animacije: pokret, boja sunca; - dvije animacije, imena odvojena zarezima.

Animacija-trajanje

Trajanje animacije kontrolira svojstvo animation-duration.

Moguće vrijednosti: vrijeme u sekundama (s) ili milisekundama (ms). U slučaju više animacija, vrijeme za svaku od njih može se navesti odvojeno zarezima. Početna vrijednost je 0s.

Funkcija mjerenja vremena animacije

Svojstvo definira vrstu animacije.

Moguće vrijednosti:

Glatka animacija ease - klizanje (zadana vrijednost) linearno - glatko kretanje ease-in - ubrzanje prema kraju ease-out - ubrzanje na početku ease-in-out - glatko klizanje nego lagano

cubic-bezier(number,number,number,number) omogućuje vam da odredite složenu vrstu animacije. Prikladno je odabrati vrijednosti na cubic-bezier.com.

kubični bezier (.24,1.49,.29,-0.48);

Animacija korak po korak korak-početak i korak-kraj - omogućuju postavljanje animacije korak-po-korak, svakako postavite određene korake. U ovom slučaju, kod korak-početka promjene se događaju na početku koraka, a kod korak-kraja - na kraju.

korak-end Ako postavite step-start, brojač će početi od jedinica.

steps(number) - omogućuje postavljanje broja koraka u kojima će se izvoditi animacija, dok možete postaviti samo zadnji korak bez potrebe zadavanja međukoraka.

Animation-iteration-count

Kontrolira ponavljanje animacije. Zadana vrijednost: 1 (animacija se reproducira jednom).

Moguće vrijednosti:

broj - koliko puta reproducirati animaciju. beskonačno – beskrajno ponavljanje.

Animacija-režija

Odgovoran za režiju animacije.

Moguće vrijednosti:

normalno - animacija se reproducira u normalnom smjeru, od početka do kraja. obrnuto - animacija se reproducira u suprotnom smjeru, odnosno od kraja. naizmjenično - animacija se reproducira od početka do kraja, a zatim u suprotnom smjeru. alternate-reverse - animacija se reproducira od kraja prema početku, a zatim u suprotnom smjeru.

Stanje reprodukcije animacije

Kontrolira zaustavljanje i reprodukciju animacije.

Moguće vrijednosti: izvodi se - animacija se reproducira (zadana vrijednost). pauzirano - animacija se zamrzava na prvom koraku.

Nije moguće kontrolirati korak gdje će biti zaustavljanje, ali možete zaustaviti animaciju na: hover:

Animacija-odgoda

Pomoću animation-delay možete postaviti odgodu za animaciju prije nego što počne reproducirati.

Moguće vrijednosti: vrijeme u sekundama (s) ili milisekundama (ms). Vrijednosti mogu biti negativne. U slučaju više animacija, vrijeme za svaku od njih može se navesti odvojeno zarezima. Početna vrijednost je 0s.

Animation-fill-mode

Svojstvo određuje hoće li animacija utjecati na element izvan vremena reprodukcije animacije.

Moguće vrijednosti:

ništa - animacija utječe na element samo tijekom reprodukcije, element se vraća u prvobitno stanje. naprijed - animacija utječe na element nakon završetka reprodukcije. unatrag - animacija utječe na element prije početka reprodukcije. oboje - animacija utječe na element i prije i nakon završetka reprodukcije.

Da biste vidjeli kako rade unatrag i oboje prije nego što animacija počne reproducirati, postavite animation-delay: 3s; . Također ima smisla otvoriti primjer u novom prozoru.

Sva ova svojstva mogu se napisati pomoću kratka bilješka, Na primjer:

Animacija: mjerenje vremena 5s beskonačno naizmjenično;

Obavezne vrijednosti su naziv i trajanje animacije. Prva vrijednost vremena smatra se trajanjem reprodukcije, druga - kašnjenjem.