CSS animacija za najmlađe. Animacija CSS primjeri i gotovi kod Vrste css animacije

Nedavno smo to vidjeli prijelazi je samo način animacije svojstva stila iz Izvorna prije konačni Države.

Dakle, prijelazi u CSS-u su specifično prema vrsti animacije, gdje je:

postoje samo dva stanja: početak i kraj;
animacija nije petlja;
međustanja kontrolira samo funkcija vremena.

Ali što ako želite:

imati kontrolu nad srednji Države?
petljati animacija?
napraviti različite vrste animacija za jedan artikal?
animirati samo određeno svojstvo na pola put?
oponašati razne vremenske funkcije za različite nekretnine?

Animacija u CSS-u dopušta sve ovo, pa i više.

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

Svojstva animacije

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

naziv-animacije: naziv animacije;
animacija-trajanje: koliko dugo animacija traje;
funkcija vremena animacije: kako se izračunavaju međustanja;
kašnjenje animacije: animacija počinje nakon nekog vremena;
animation-iteration-count: koliko puta treba izvršiti animaciju;
animation-direction: treba li kretanje ići u suprotnom smjeru ili ne;
animation-fill-mode: koji se stilovi primjenjuju prije početka i nakon završetka animacije.

Brzi primjer

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

@keyframes odbija (0% (dolje: 0; sjena okvira: 0 0 5px rgba (0,0,0,0.5);) 100% (dolje: 50px; sjena okvira: 0 50px 50px rgba (0,0, 0,0.1;)) .gumb za učitavanje (animacija: poskakivanje 0,5 s kubični bezier (0,1, 0,25, 0,1, 1) 0 s beskonačno izmjenjuju oba;)

Prvo morate napisati pravu animaciju poskakanja koristeći @keyframes i imenovati je.

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

naziv-animacije: odskakanje (odgovara nazivu ključnih kadrova)
Trajanje animacije: 0,5 s (pola sekunde)
animacija-vremenska-funkcija: kubični-bezier (0.1,0.25,0.1,1)
kašnjenje animacije: 0s (bez kašnjenja)
animation-iteration-count: beskonačno (beskrajno reproducirano)
smjer animacije: naizmjenični (ide naprijed-nazad)
animacija-fill-mode: oboje

@ključni okviri

Prije animiranja HTML elemenata, trebate napisati animaciju pomoću ključnih kadrova... Općenito, ključni okviri su svi međukorak u animaciji. Oni se određuju pomoću postotaka:

0% - prvi korak animacije;
50% je pola koraka u animaciji;
100% je zadnji 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 ih napisati samo nekoliko.

Svaki ključni kadar je CSS pravilo, to znači da možete pisati CSS svojstva kao i obično.

Da biste definirali animaciju, samo napišite ključnu riječ @keyframes sa svojim titula:

@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 krajnji 100% sadrže ista pravila CSS. To će osigurati savršenu petlju animacije. Budući da je brojač ponavljanja postavljen na beskonačan, animacija će ići od 0% do 100%, a zatim odmah leđa do 0% i tako zauvijek.

naziv-animacije

Ime koristi se barem animacija dvaput:

na pisanje animacije s @keframes;
na korištenjem animacije koje koriste svojstvo ime-animacije (ili svojstvo skraćene animacije).

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

Poput naziva CSS klasa, nazivi animacija mogu 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 milisekunde(200 ms).

Selektor (trajanje animacije: 0,5 s;)

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

animacija-vrijeme-funkcija

Slično funkcijama vremena za prijelaze, mogu se koristiti funkcije mjerenja vremena za animaciju ključne riječi kao što su linearni, ease-out, ili se mogu definirati s proizvoljnim Bezierove krivulje.

Selektor (funkcija mjerenja vremena animacije: jednostavno ulazak;)

Zadana je jednostavnost.

Budući da CSS animacije koriste ključne kadrove, možete postaviti linearni funkcija vremena i simulirati specifična Bezierova krivulja definiranjem mnoge vrlo specifične ključni okviri. Pogledajte Bounce.js za vrhunske animacije.

animacija-kašnjenje

Kao i kod odgode prijelaza, kašnjenje animacije može se postaviti na sekundi(1s) ili milisekunde(200 ms).

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

Korisno kada je uključeno više animacija niz.

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

animacija-iteracija-broj

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

cijeli brojevi, poput 2 ili 3;
frakcijski brojevi poput 0,5, koji će reproducirati samo polovicu animacije;
beskonačnu ključnu riječ, koja će animaciju ponavljati beskonačno.

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

animacija-režija

Svojstvo smjera animacije određuje kojim redoslijedomčitaju se ključni kadrovi.

normalno: počinje na 0%, završava na 100%, ponovno počinje na 0%.
obrnuto: počinje na 100%, završava na 0%, ponovno počinje na 100%.
alternativno: počinje s 0%, ide na 100%, vraća se na 0%.
alternativno-obrnuto: počinje na 100%, ide na 0%, vraća se na 100%.

To je lakše zamisliti ako je broj ponavljanja animacije postavljen na beskonačan.

animacija-fill-mode

Svojstvo animation-fill-mode određuje što će se dogoditi ispred početak animacije i nakon njegov završetak.

U određivanju ključno osoblje možete odrediti CSS pravila koji će se primijeniti u različitim koracima animacije. Sada ova CSS pravila mogu sudarati s onima koji već primijenjena na animirane elemente.

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

Zamislimo se dugme, koji je:

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

Posljednje ažuriranje: 06.11.2016

Animacija pruža velike mogućnosti za promjenu stila elementa. Nakon prijelaza, imamo skup svojstava s početnim vrijednostima koje element ima prije početka prijelaza i konačnim vrijednostima koje se postavljaju nakon završetka prijelaza. Dok tijekom animacije možemo imati ne samo dva skupa vrijednosti - početni i konačni, već i mnoge međuskupove vrijednosti.

Animacija se oslanja na uzastopnu promjenu ključnih kadrova (ključnih kadrova). Svaki ključni kadar definira jedan skup vrijednosti za animirana svojstva. A uzastopna promjena takvih ključnih kadrova zapravo će predstavljati animaciju.

U stvari, prijelazi koriste isti model – dva ključna okvira su također implicitno definirana – početak i kraj, a sam prijelaz predstavlja prijelaz od početnog do krajnjeg ključnog kadra. Jedina razlika s animacijom u ovom slučaju je ta što možete definirati više srednjih ključnih kadrova za animaciju.

Općenito, CSS3 deklaracija ključnog okvira ima sljedeći oblik:

@keyframes animation_name (od (/ * početne vrijednosti CSS svojstva * /) do (/ * konačne vrijednosti CSS svojstva * /))

Nakon ključne riječi @keyframes slijedi naziv animacije. Zatim su barem dva ključna okvira definirana u vitičastim zagradama. Blok nakon ključne riječi from deklarira se početnim ključnim kadrom, a nakon ključne riječi to u bloku definira se završni ključni okvir. Unutar svakog ključnog okvira definirano je jedno ili više CSS svojstava, slično kao što se stvara normalan stil.

Na primjer, definirajmo animaciju za boju pozadine elementa:

Animacija u CSS3

U ovom slučaju, animacija se zove backgroundColorAnimation. Animacija može imati proizvoljan naziv.

Ova animacija omogućuje prijelaz s crvene na plavu pozadinu. Nakon završetka animacije, bit će postavljena boja koja je definirana za div element.

Da bi se elementu priložila animacija, njegovo svojstvo imena-animacije primjenjuje se u njegovom stilu. Vrijednost ovog svojstva je naziv animacije koju treba primijeniti.

Također, koristeći svojstvo trajanja animacije, trebate postaviti vrijeme animacije u sekundama ili milisekundama. U ovom slučaju, vrijeme animacije je 2 sekunde.

S ovom definicijom, animacija će početi odmah nakon učitavanja stranice. Međutim, također možete pokrenuti animacije na temelju radnje korisnika. Na primjer, definiranjem stila za: hover pseudo-klasu, možete definirati animaciju koja će se pokrenuti kada miš prijeđe iznad elementa:

@keyframes backgroundColorAnimation (od (boja pozadine: crvena;) do (boja pozadine: plava;)) div (širina: 100px; visina: 100px; margina: 40px 30px; obrub: 1px čvrsta # 333; boja pozadine: # ccc;) div: lebdjeti (naziv-animacije: backgroundColorAnimation; trajanje animacije: 2 s;)

Mnogi ključni okviri

Kao što je gore spomenuto, animacija, osim dva standardna ključna okvira, omogućuje korištenje mnogih srednjih. Za definiranje tween-a primjenjuje se postotak animacije u kojoj bi se tween trebao koristiti:

@keyframes backgroundColorAnimation (od (boja pozadine: crvena;) 25% (boja pozadine: žuta;) 50% (boja pozadine: zelena;) 75% (boja pozadine: plava;) do (boja pozadine: ljubičasta ;))

U ovom slučaju, animacija počinje crvenom bojom. Nakon 25% vremena animacije, boja se mijenja u žutu, nakon još 25% u zelenu i tako dalje.

Također možete animirati nekoliko svojstava u jednom ključnom kadru odjednom:

@keyframes backgroundColorAnimation (od (boja pozadine: crvena; neprozirnost: 0,2;) do (boja pozadine: plava; neprozirnost: 0,9;))

Također možete definirati više zasebnih animacija, ali ih primijeniti zajedno:

@keyframes backgroundColorAnimation (od (boja pozadine: crvena;) do (boja pozadine: plava;)) @keyframes opacityAnimation (od (prozirnost: 0,2;) do (prozirnost: 0,9;)) div (širina: 100px; visina: 100px; margina: 40px 30px; obrub: 1px čvrsta # 333; boja pozadine: #ccc; naziv animacije: backgroundColorAnimation, opacityAnimation; trajanje animacije: 2s, 3s;)

Animacije su navedene kao vrijednost svojstva imena-animacije, odvojene zarezima, a vrijeme ovih animacija je također postavljeno odvojeno zarezima u svojstvu trajanja animacije. Naziv animacije i njezino vrijeme odgovaraju poziciji, odnosno animacija opacityAnimation će trajati 3 sekunde.

Završetak animacije

Općenito, nakon završetka vremenskog intervala određenog svojstvom animation-duration, animacija također završava. Međutim, uz pomoć dodatnih svojstava možemo nadjačati ovo ponašanje.

Na primjer, svojstvo animation-iteration-count određuje koliko će se puta animacija ponoviti. Na primjer, 3 animacije se ponavljaju u nizu:

Broj ponavljanja animacije: 3;

Ako želite da se animacija izvodi beskonačan broj puta, tada se ovom svojstvu dodjeljuje vrijednost beskonačno:

Animacija-iteracija-broj: beskonačno;

Kada ponovite, animacija će početi ispočetka od početnog ključnog kadra. Ali s animacijskim smjerom: alternativno; suprotnom smjeru animacije kada se ponavlja. Odnosno, počet će na krajnjem ključnom kadru, a zatim će doći do prijelaza na početni okvir:

Animation-name: backgroundColorAnimation, opacityAnimation; animacija-trajanje: 2s, 2s; animacija-iteracija-broj: 3; animacija-režija: alternativna;

Kada animacija završi, preglednik postavlja stil za animirani element na stil koji bi imao prije primjene animacije. No svojstvo animation-fill-mode: forwards omogućuje vam da postavite konačnu vrijednost animiranog svojstva točno onu koja je bila u zadnjem kadru:

Naziv-animacije: backgroundColorAnimation; animacija-trajanje: 2s; animacija-iteracija-broj: 3; animacija-režija: alternativna; animacija-fill-mode: naprijed;

Animacija odgode

Koristeći svojstvo kašnjenja animacije, možete definirati vrijeme kašnjenja animacije:

Naziv-animacije: backgroundColorAnimation; animacija-trajanje: 5s; animacija-kašnjenje: 1s; / * kašnjenje od 1 sekunde * /

Funkcija glatkoće animacije

Kao i kod prijelaza, možete primijeniti sve iste funkcije ublažavanja na animacije:

linearna: funkcija linearne glatkoće, svojstva se ravnomjerno mijenjaju tijekom vremena

ease: funkcija ease koja ubrzava animaciju prema sredini i usporava prema kraju, pružajući prirodniju promjenu

ease-in: funkcija ease koja ubrzava samo na početku

ease-out: funkcija ease koja ubrzava samo na početku

ease-in-out: funkcija olakšavanja koja ubrzava animaciju prema sredini i usporava prema kraju, pružajući prirodniju promjenu

cubic-bezier - Koristite kubičnu bezier funkciju za animaciju

Svojstvo funkcije vremena animacije koristi se za postavljanje funkcije glatkoće:

@keyframes backgroundColorAnimation (od (boja pozadine: crvena;) do (boja pozadine: plava;)) div (širina: 100px; visina: 100px; margina: 40px 30px; granica: 1px čvrsta # 333; naziv animacije: backgroundColorAnimation ; trajanje animacije: 3 s; funkcija mjerenja vremena animacije: jednostavno ulazak;)

Svojstvo animacije

Svojstvo animacije je skraćeni način definiranja gornjih svojstava:

Animacija: animacija-naziv animacije-trajanje animacija-vremenska-funkcija animacija-iteracija-broj animacija-smjer animacija-odgoda animacija-fill-mode

Prva dva parametra, koja daju naslov i vrijeme animacije, obavezna su. Ostale vrijednosti su izborne.

Uzmimo sljedeći skup svojstava:

Naziv-animacije: backgroundColorAnimation; animacija-trajanje: 5s; funkcija mjerenja vremena animacije: jednostavnost ulaska; animacija-iteracija-broj: 3; animacija-režija: alternativna; animacija-kašnjenje: 1s; animacija-fill-mode: naprijed;

Ovaj skup će biti ekvivalentan sljedećoj definiciji animacije:

Animacija: backgroundColorAnimation 5s jednostavnog ulaska 3 alternativne 1s naprijed;

Izrada bannera s animacijom

Kao primjer s animacijom, napravimo jednostavan animirani banner:

HTML banner

Tri animacije se odvijaju u isto vrijeme. Animacija "Banner" mijenja boju pozadine bannera, dok animacije text1 i text2 prikazuju i skrivaju tekst pomoću postavki transparentnosti. Kada je prvi tekst vidljiv, drugi nije vidljiv i obrnuto. Tako dobivamo animaciju teksta u banneru.

CSS3 animacija se široko koristi. Vrijeme je da shvatite čak i najnovije graditelje web stranica što je CSS animacija i kako je stvoriti. Možda mislite da je CSS3 animacija usmjerena na pomicanje blokova i da izgleda kao crtani film. Ali CSS animacija nije samo pomicanje elementa s jedne točke na drugu, već i izobličenje i druge transformacije. Da bi bilo jasno čak i početnicima, sve sam opisao u koracima.

1. Osnovna svojstva CSS3 animacije

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

naziv-animacije- jedinstveni naziv animacije (ključni okviri, o njima ćemo govoriti u nastavku).
animacija-trajanje- trajanje animacije u sekundama.
animacija-vrijeme-funkcija- krivulja brzine animacije. Na prvi pogled vrlo je neshvatljivo. Uvijek je lakše pokazati primjerom, a vidjet ćete ih u nastavku. Može imati sljedeće vrijednosti: linearno | lakoća | jednostavnost ulaska | olakšanje | kubni-bezier (n, n, n, n).
animacija-kašnjenje- kašnjenje u sekundama prije početka animacije.
animacija-iteracija-broj- broj ponavljanja animacije. Postavlja se ili jednostavno brojem, ili možete odrediti beskonačno i animacija će se izvoditi neograničeno.

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

Posljednja stvar koju moramo znati i razumjeti iz teorije je kako stvoriti ključne kadrove. To je također lako učiniti i radi se pomoću pravila @keyframes unutar kojeg su specificirani ključni kadrovi. Sintaksa za ovo pravilo je sljedeća:

Iznad smo postavili prvi i posljednji okvir. Sva međustanja se izračunavaju AUTOMATSKI!

2. Pravi primjer CSS3 animacije

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

Kada uče programski jezik, obično napišu program "Hello, world!" Ali ne proučavamo programski jezik, već jezik za opisivanje izgleda dokumenta. Stoga ćemo imati svoj "Zdravo, svijet!"

Evo što ćemo učiniti za primjer: neka nam je neka vrsta bloka

u početku će biti širok 800px i smanjiti se na 100px za 5 sekundi.

Čini se da je sve jasno - samo trebate stisnuti blok

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

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

1	<div klasa = "toSmallWidth">

A evo što je u tablici stilova:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margina: 20px auto; / * 20px gornji i donji padding i srednje poravnanje * / pozadina: crvena; / * crvena pozadina za blok * / visina: 100px; / * visina bloka 100px * /širina: 800px; / * početna širina 800px * /-webkit-animation-name: animWidthSitehere; -webkit-animacija-trajanje: 5s; / * svojstvo s prefiksom za preglednike Chrome, Safari, Opera * / naziv-animacije: animWidthSitehere; / * navedite naziv ključnih okvira (nalazi se ispod) * / animacija-trajanje: 5s; / * postavite trajanje animacije * / } / * ključni okviri s prefiksom za preglednike Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSite ovdje ( od (širina: 800px;) do (širina: 100px;)) @keyframes animWidthSite ovdje ( od (širina: 800px;) / * prvi ključni okvir gdje je širina bloka 800px * / do (širina: 100px;) / * posljednji ključni kadar gdje je širina bloka 100px * / }

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

Vaša prva CSS3 animacija je spremna. Da biste konsolidirali stečeno znanje, izradite HTML dokument i CSS datoteku te tamo umetnite (ili bolje upišite ručno) kod iz primjera. Tada ćete sigurno sve razumjeti. Zatim pokušajte učiniti isto s visinom bloka (trebalo bi se smanjiti u visinu) kako biste učvrstili materijal.

3. Primjeri CSS3 animacije su složeniji

Iznad ste naučili kako je lako stvoriti CSS3 animacije. Ako ste to pokušali učiniti vlastitim rukama, već ste razumjeli cijeli proces i sada želite znati kako možete stvoriti složeniju i ljepšu animaciju. I stvarno ga je moguće stvoriti. U nastavku se nalaze 3 lekcije u kojima se animacija stvara na isti način kao u gornjem primjeru.

Praksa razvoja web resursa dovela je do dva značajna trenda: brzine i percepcije kvalitete. Prvi obvezuje programera da brzo obavi svoj posao, drugi - definira granice svrsishodnog.

Posjetitelj ima određeni cilj kada posjećuje stranicu i vodi se općeprihvaćenim idejama o tome gdje se što nalazi i kako treba funkcionirati. Programer može raditi svoj posao kako mu odgovara, ali ako je zainteresiran za privlačenje pažnje većeg broja posjetitelja, onda je neprikladno zanemariti njihovo mišljenje.

Sintaksa i semantika animacije

Svojstvo CSS animacije jednostavno je za korištenje i omogućuje vam brzo stvaranje zanimljivih efekata. Ne morate biti pametni i dizajnirati vlastite animacije kako bi se elementi web stranice ponašali na moderan način koji posjetitelj očekuje. Sve funkcionira po definiciji, očekivano i traženo.

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

Ovdje nisu prikazani svi okviri. Svojstvo se u ovom slučaju implementira glatko. Posjetitelj stranice promatra glatko kretanje s povećanjem volumena linije i kretanjem slike. Korištenjem različitih opcija kretanja umjesto tipa jednostavnog ulaska, kretanje se može kontrolirati. Opcija jednostavnog ulaska omogućuje ubrzanje na početku i usporavanje na kraju, ali možete odabrati drugu opciju kretanja.

Preklapanje i interakcija elemenata

CSS razmatra sve elemente koji imaju svojstvo animacije neovisno jedan o drugom i o cjelokupnom toku stranice. Ako se elementi preklapaju jedan s drugim, onda se dobiva kombinacija učinaka i kao rezultat novi učinak.

Ako u procesu animacije elementi promijene svoja svojstva, onda zbog zakona preklapanja boja možete dobiti vrlo originalne efekte sa samo dva ili tri elementa.

Crtež elementa je od velike važnosti. U navedenom primjeru od slike se formira traka na kojoj su dvije linije različitih boja. Kada se veličina trake poveća, to je pila; kada se pila pomiče, to je pokretni val. Manipuliranjem linijama i njihovim nagibom možete stvoriti 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, generira izvorne promjene. Primjer:

Ovdje traka kontinuirano mijenja svoj izgled iz neprozirnog u prozirno stanje. U ovom slučaju donja slika samo mijenja svoj oblik.

Informacije o animaciji

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

Jamstvo da će posjetitelj adekvatno percipirati ispravno napisan tekst puno je veće od nade u ispravno razumijevanje slike, pogotovo kada dizajner stranice ima vlastitu ideju o oblicima izražavanja značenja.

Ako su ranije, kada je CSS animacija tek došla u svijet izgleda, puzajuće linije, treptajući satovi, pulsirajući tekstovi bili popularni, u modernoj izgradnji web stranica smatra se normalnim principom: bez uznemiravanja posjetitelja, predstavite funkcionalnost web resursa što učinkovitije koliko je moguće.

U tom kontekstu, bilo koji od gore navedenih primjera prikladan je za predstavljanje tekstualnih informacija, ali korištenje CSS-a kao 3D animacije je najpraktičnije.

Ovdje, u "normalnom" stanju, tekst zauzima malo prostora. Možete istaknuti glavnu riječ ili odrediti značenje. Čim miš prijeđe iznad područja teksta, on se razvija iz CSS 3D animacije u normalno čitljivo stanje.

Opcija za uštedu prostora u kombinaciji s 3D dizajnom omogućuje kompaktno postavljanje informacija. Ispražnjeni prostor može se koristiti u druge ili srodne namjene. Uz CSS animaciju, informacije koje su vam potrebne bit će dostupne u pravo vrijeme.

Animacija potrošača

Primjetni uspjesi u stvaranju visokokvalitetnih web resursa i dalje izostavljaju jedno čudno postavljeno pitanje: zašto je dizajn web stranice briga programera?

Stranica nije umjetničko djelo i nije rezultat kreativnog procesa u estetske svrhe. Stranica je, prije svega, funkcionalnost koja će, po mišljenju vlasnika (programera), na nju dovesti nove posjetitelje i pružiti priliku za rad s njihovim klijentima.

Prodati proizvod, pružiti uslugu, obaviti određeni posao... Posjetitelj dolazi po robu, usluge i radove. 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 trgovini radio sve onako kako je programer smislio kroz predloženu opciju dizajna? Animacija u kontekstu CSS-a izvrstan je alat, ali zašto ne otići malo dalje: kao i mnogi potrošači, postoji toliko mnogo opcija za izražavanje funkcionalnosti i dizajna.

Varijanta "animacije potrošača" je kada postoji ono što je programer predložio, i što su prethodni potrošači odabrali, a što je sadašnji potrošač smislio.

Pozdrav prijatelji! Danas ćemo pogledati zanimljivu temu - stvaranje CSS animacija na stvarnom primjeru. Ovaj vodič će kulminirati stvaranjem prekrasne CSS animacije logotipa od milijun dolara.

Razred

Zapin

Materijali za lekciju

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

Malo teorije

Prije nego počnete stvarati animirani primjer, trebali biste prijeći na osnove. CSS animacije, razmotrite osnovne pojmove, svojstva i pravila za izradu CSS animacija.

Ako ste imali iskustva u stvaranju animacija u bilo kojoj aplikaciji, kao što je Adobe After Effects ili stari Flash Professional (sada Adobe Animate), trebali biste biti upoznati s konceptima kao što su ključni kadrovi, funkcije vremena ili dinamika kretanja.», što, kao npr. u bilo kojem drugom području animacije, primjenjivi su na animaciju elemenata na stranici pomoću CSS-a. Međutim, za razliku od rada s sučeljima aplikacije, svoje CSS animacije stvarate pisanjem koda u uređivaču.

CSS pravilo @keyframes

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

Za pregled teorije i osnova koristit ćemo čisti CSS, a u budućnosti ćemo uz složeniji primjer povezati korištenje Sass pretprocesora. Više o Sassu možete saznati u tutorialu. Osim toga, za dublje razumijevanje osnova CSS-a, također preporučam da pročitate lekcije "Osnove CSS-a - Vodič za najmlađe" i "Svi CSS selektori u jednoj lekciji"

Pogledajmo strukturu @keyframes i ključne kadrove s jednostavnim primjerom:

@keyframes okretanje (0% (obrub-radijus: 0 0 0 0; transformacija: rotacija (0deg);) 25% (obrub-radijus: 50% 0 0 0; transformacija: rotacija (45 stupnjeva);) 50% (obrub- polumjer: 50% 50% 0 0; transformacija: rotirati (90 stupnjeva);) 75% (granični radijus: 50% 50% 50% 0; transformacija: rotirati (135 stupnjeva);) 100% (granični radijus: 50% 50 % 50% 50%; transformiraj: rotiraj (180 stupnjeva);))

U prvom retku vidimo da iza ključne riječi @keyframes dolazi njezin naziv "okretanje". Ovo je naziv bloka ključnih kadrova, na koji ćemo se pozivati u nastavku.

Nakon deklaracije otvara se vitičasta zagrada (u ovom primjeru, u čistom CSS-u), u kojoj se svojstva za svaki ključni okvir upisuju uzastopno od 0% do 100%. Imajte na umu da između 0% i 100%, možete umetnuti onoliko međuvrijednosti koliko želite, bilo 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 su pripremljeni za određeni selektor ako želimo postići određeno ponašanje iz željenog bloka.

Pozivajući se na blok ključnih kadrova

Nakon što smo postavili ključne kadrove za objekt (u stvarnom životu to se radi paralelno ili čak nakon pristupa bloku s ključnim okvirima), možemo se obratiti našem novonapravljenom 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 naizmjenično;)

Ništa fensi do posljednjeg retka. Ovdje definiramo kako će objekt izgledati na početku i u zadnjem retku bloka upućujemo na blok ključnih kadrova s nazivom "okretanje":

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

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

Analogno, kompozitno svojstvo animacije može se podijeliti u nekoliko zasebnih svojstava:

naziv-animacije	Naziv animacije iz @keyframes
animacija-trajanje	Trajanje ili koliko dugo je potrebno za izvođenje CSS animacije. Može se postaviti u sekundama (s) ili milisekundama (ms)
animacija-vrijeme-funkcija	Vremenska funkcija, dinamika kretanja objekta ili promjene svojstava ( olakšati- (zadano) animacija počinje polako, ubrzava se i polako završava; linearni- animacija se odvija ravnomjerno; lakoća ulaska- počinje polako i ubrzava do posljednjeg ključnog kadra; olakšanje- počinje brzo i postupno usporava na kraju; lakoća ulaska- polako počinje i polako završava)
animacija-kašnjenje	Vrijeme kašnjenja animacije PRIJE početka. Također se postavlja u sekundama ili milisekundama.
animacija-iteracija-broj	Broj ponavljanja (iteracija) animacije ( beskonačan- beskonačno, ili možete postaviti prosti broj bez jedinica)
animacija-režija	Smjer animacije, uzastopno, unatrag ili povratno ( normalan- (zadano) animacija se reproducira od početka do kraja i prestaje; naizmjenično- igra od početka do kraja i u suprotnom smjeru; alternativno-obrnuto- igra od kraja do početka i natrag; obrnuto- animacija se reproducira od kraja.)
animacija-igra-stanje	Kontrola reprodukcije animacije ( zastao(pauza), trčanje(lansiranje) itd.). Može se primijeniti na: lebdeći ili iz JS funkcije ako je potrebno
animacija-fill-mode	Stanje elementa prije i nakon reproduciranja animacije. Na primjer, vrijednost unazad omogućuje vam da vratite sva svojstva u njihovo izvorno stanje odmah nakon primjene animacije

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

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

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

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

Kao što sam ranije rekao, kratka oznaka počinje s " animacija“, Slijede vrijednosti čiji je redoslijed bolje ne zaboraviti kako ne bi došlo do zabune prilikom pisanja CSS animacija.

Međutim, većina ovih svojstava može se izostaviti, budući da će većinu vremena njihove zadane vrijednosti odgovarati većini potreba za animacijom. Neki od njih se mogu izostaviti, ali ostale treba navesti redoslijedom koji smo ranije razmatrali. Općenito, da bi vaša animacija funkcionirala, potrebna su vam samo dva parametra u vašem složenom svojstvu - naziv ( naziv-animacije) i trajanje ( animacija-trajanje).