Bolj ko se približujemo začetku delovanja vmesnika, bolj razumljiv postaja uporabniku. V življenju se skoraj nič ne zgodi takoj - ko odpremo pločevinko soda ali zapremo oči pred spanjem, opazimo kup vmesnih stanj in ne ostrega "odprto/zaprto", kot se dogaja na spletu.

V svojem članku bom delil svoje znanje o animaciji CSS in kako delati z njo. Animacija daje spletnim mestom dinamičnost in izboljša razumevanje njihovih zmogljivosti. Oživi spletne strani in pomaga pri interakciji uporabnikov. Za razliko od prehodov CSS3 animacije CSS temeljijo na ključnih sličicah. Ki vam omogočajo predvajanje in ponavljanje učinkov za določen čas ter samodejno zaustavitev animacije znotraj zanke.

Animacija je niz ključnih sličic ali ključnih sličic, shranjenih v CSS:

@keyframes animation-test (0 % (širina: 100 slikovnih pik; ) 100 % (širina: 200 slikovnih pik; ) )

Poglejmo, kaj se tukaj dogaja. Ključna beseda @keyframes označuje samo animacijo. Nato sledi ime animacije, v našem primeru animation-test. Zavit oklepaj vsebuje seznam ključnih sličic. Uporabljamo začetni okvir 0 % in končni okvir 100 % (lahko ju zapišemo tudi kot od in do).
Oglejte si spodnjo kodo. Animacijo lahko nastavite tudi takole:

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

Ne pozabite, da če začetni ali končni okvir ni določen, ju bo brskalnik samodejno zaznal, kot da zanju ne bi bila uporabljena nobena animacija.

Animacijo lahko povežete z elementom, kot je ta:

Izbirnik elementov (ime-animacije: ime-vaše-animacije; trajanje-animacije: 2,5 s; )

Lastnost animation-name podaja ime za animacijo @keyframes. Pravilo trajanja animacije določa trajanje animacije v sekundah (1 s, 30 s, 0,5 s) ali milisekundah (600 ms, 2500 ms).

Ključne sličice lahko tudi združite v skupine:

@keyframes animation-test (0 %, 35 % (širina: 50 slikovnih pik; ) 75 % (širina: 200 slikovnih pik; ) 100 % (širina: 100 %; ) )

Na en element (izbirnik) lahko uporabite več animacij. Njihova imena in parametri morajo biti zapisani v vrstnem redu uporabe:

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

Zakasnitev animacije:

Lastnost animation-delay določa zakasnitev pred predvajanjem animacije v sekundah ali milisekundah:

Izbirnik elementa ( ime-animacije: ime-animacije-1; trajanje-animacije: 3 s; zakasnitev-animacije: 2 s; /* 2 sekundi bosta minili, preden se animacija začne */ )

Ponovno predvajanje animacije:

Z uporabo animation-iteration-count lahko določimo, kolikokrat se bo animacija ponovila: 0, 1, 2, 3 itd. Ali neskončno za zanko:

Izbirnik elementa (ime-animacije: ime-animacije-1; trajanje-animacije: 3s; zakasnitev-animacije: 4s; število ponovitev-animacije: 5; /* animacija se predvaja 5-krat */ )

Stanje elementa pred in po animaciji:

Z uporabo lastnosti animation-fill-mode je mogoče določiti, v kakšnem stanju bo element pred začetkom in po koncu animacije:

animation-fill-mode: naprej;- element animacije bo po zaključku/predvajanju v stanju zadnje ključne sličice;

a nimation-fill-mode: nazaj;- element bo v stanju prvega ključnega kadra;

animation-fill-mode: oboje; - pred začetkom animacije bo element v stanju prvega ključnega kadra, po zaključku - v stanju zadnjega.

Zagon in zaustavitev animacije:

Za to je odgovorna lastnost animation-play-state, ki ima lahko dve vrednosti: izvaja se ali je zaustavljena.

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

Smer animacije:

Lastnost animation-direction določa, kako nadzorovati smer, v kateri se predvaja animacija. Tukaj so možne vrednosti:

animacija-režija: normalna; - animacija se predvaja v neposrednem vrstnem redu;

animacija-režija: obratna; - animacija se predvaja v obratnem vrstnem redu, od do do od;

animacija-režija: izmenično;- sode ponovitve animacije se predvajajo v obratnem vrstnem redu, lihe - v naprej;

animacija-smer: izmenično-obratno; - lihe ponovitve animacij se predvajajo v obratnem vrstnem redu, sode - v naprej.

Funkcija gladkega izpisa animiranih okvirjev:

Lastnost animation-timing-function omogoča nastavitev posebne funkcije, odgovorne za hitrost predvajanja animacije. Privzeto se animacija začne počasi, hitro pospeši in na koncu upočasni. Trenutno imamo naslednje vnaprej določene vrednosti: linearno, enostavnost, olajšanje navznoter, olajšanje navzven, enostavnost navznoter-ven, korak-začetek, korak-konec.

Vendar pa lahko takšne funkcije ustvarite sami. Pomen funkcija-časovne-animacije: cubic-bezier(P1x, P1y, P2x, P2y); sprejme 4 argumente kot vhod in zgradi distribucijsko krivuljo za proces animacije.

Na spletnem mestu lahko podrobneje preučite ali preizkusite ustvarjanje teh funkcij http://cubic-bezier.com

Končno je mogoče animacijo razčleniti na niz posameznih vrednosti (korakov) z uporabo funkcije korakov, ki kot vnos sprejme število korakov in smer (začetek ali konec). V spodnjem primeru je animacija sestavljena iz 5 korakov, od katerih se zadnji zgodi tik pred koncem animacije:

Izbirnik elementa (ime-animacije: ime-animacije-1; trajanje-animacije: 3 s; zakasnitev-animacije: 5 s; število-iteracij-animacije: 3; funkcija-časovne-animacije: koraki(5, konec); )

Podpora brskalnika za animacijo:

Vrednosti v tabeli označujejo prvo različico brskalnika, ki v celoti podpira lastnost.

Vrednosti z -webkit-, -moz- ali -O- označujejo prvo različico, ki je delovala s predpono.

Na spletni strani https://www.w3schools.com Animacijo CSS lahko preučite podrobneje (s primeri).
Ena izmed priljubljenih knjižnic za delo z animacijami je animate.css.

Morda se zdi, da težave, s katerimi se srečujete pri delu z animacijami CSS, niso upravičene. Ampak to absolutno ni res.

Prvič, CSS je močno orodje za izboljšanje uporabniške izkušnje vmesnika. Ne vpliva veliko na produktivnost uporabnika. Za razliko od analogov JavaScript. Tehnologija, skozi uporabo računalniška moč GPU omogoča brskalnikom hitro optimizacijo hitrosti upodabljanja elementov.

Drugič, prilagodljivost, hitrost in enostavnost izvajanja animacij CSS bodo pomagale "vdahniti življenje" obstoječim ali novim vmesnikom. Ko ste razvili splošne in izvirne pristope ter razumeli posebnosti tehnologije, lahko ustvarite edinstvene uporabniške vmesnike za skoraj vse projekte.

Upam, da ste našli v članku koristne informacije zame. Lepe strani za vse. Ne pozabite na animacije :)

POZOR! Ker bomo v tej lekciji analizirali animacijo, vam ne bom mogel pokazati primera njenega dela v slikah, zato vas prosimo, da odprete urejevalnik kode in tam napišete kodo, podano v tem članku.

Osnove ustvarjanja

Torej, najprej morate začeti s tem, kako ga ustvariti. Verjetno ste navajeni na dejstvo, da se katera koli stvar v CSS implementira z dodelitvijo potrebnih lastnosti z ustreznimi vrednostmi želenemu izbirniku. Torej pri ustvarjanju animacije to ni dovolj. Diagram izgleda takole:

Sami učinki prehoda so ustvarjeni z @keyframes

Zahtevani element dobi isto animacijo, kot tudi njene parametre (vse to z uporabo lastnosti in njihovih vrednosti).

Torej, najprej moramo opisati potrebne spremembe v @keyframes, poglejmo si podrobneje, kako delati z njimi.

sintaksa @keyframes

Pravzaprav vam bom lažje vse razložil z že pripravljenim primerom, čeprav zelo preprostim. Tukaj je (koda je dodana v datoteko css):

@keyframes pulse( 0%(velikost pisave: 50px;) 50%(velikost pisave: 60px;)) 100%(velikost pisave: 50px;))

Torej je za ključno besedo @keyframes poljubna beseda, ki bo delovala kot ime animacije. V našem primeru je to "pulz". Nato odprite zavite oklepaje, v katerih so zapisana potrebna pravila.

Odstotki so tako imenovani časovni žigi, pri katerih bodo navedene lastnosti dodane elementu. V našem primeru zapisano pomeni naslednje: na samem začetku izvajanja bo velikost pisave 50 slikovnih pik, na sredini se bo povečala na 60, na koncu pa se bo spet zmanjšala na začetno velikost.

Ključni besedi od in do lahko nadomestita vnos v odstotkih; označujeta 0 % oziroma 100 %, torej začetek in konec predvajanja.

Uresničevanje animacije

Zaenkrat imamo samo kodo, ki generira animacijski učinek, vendar je ne uporabljamo nikjer. Če osvežite spletno stran, se ne bo nič spremenilo. V skladu s tem morate za uporabo animacije izvesti dva koraka:

Izberite element, za katerega bo uporabljen

Povežite ga s pravili, opisanimi prek @keyframes (preko imena), in tudi nastavite dodatne nastavitveče je potrebno.

Poskusimo

V svoji datoteki html sem ustvaril blok z razredom shadow, ki vsebuje preprosto vrstico besedila. Naš cilj je uporabiti animacijske učinke, ki smo jih opisali prej besedilni element.

V tem primeru je treba določiti dve zahtevani lastnosti, da bo vse delovalo. Prvič, to je ime, ki smo ga zapisali v ključne sličice. Drugič, to je trajanje animacije, saj brez tega parametra brskalnik preprosto ne bo mogel predvajati.

Torej, poleg stilov, ki jih naš blok že ima, dodamo nove:

ime-animacije: utrip; animacija-trajanje: 2s;

Tako se bo vse ponovilo 4-krat in nato ustavilo. Kot razumete, lahko namesto štirih vnesete katero koli številko.

Neskončna animacija v css3

Izvaja se zelo enostavno z uporabo te iste lastnosti. Pravzaprav lahko samo nastavite število ponovitev na nekaj tisoč, to bo dovolj, a teoretično se naša animacija ne bo ponavljala v nedogled.

animation-iterations-count: neskončno;

To je to, zdaj smo naredili neskončno ponavljanje. Ne priporočam, da preverite, ali je to res, potem ko ste vse življenje sedeli za monitorjem. To se preprosto uporablja v primerih, ko želite, da se učinek nenehno ponavlja in ne izgine. Če je nemoteč in uporabnika ne moti, zakaj pa ne.

Zamuda pred začetkom

Privzeto se predvajanje začne, ko se stran v celoti naloži. To vedenje je mogoče nadzorovati z lastnostjo animation-delay. Njegova vrednost je podana v sekundah.

Smer

Druga zanimiva lastnost je režija animacije. Privzeto je nastavljen na normalno; če ga nastavite na obratno, se bodo vsi opisani okvirji izvajali v nasprotni smeri. Preverimo, kakšna je razlika. Da bi to naredil, sem učinek nekoliko spremenil tako, da sem dodal še en okvir.

@keyframes pulse( 0%(velikost pisave: 50px;) 50%(velikost pisave: 60px;) 70%(velikost pisave: 80px;) 100%(velikost pisave: 50px;))

Torej, pri normalni smeri se bo v prvi polovici animacije velikost pisave povečala na 60 slikovnih pik, nato pa se bo spet močno povečala, do 80, nato pa se bo vrnila v prvotni položaj.

riž. 2. Izvirna velikost besedila

riž. 3. Velikost pisave je skoraj na koncu animacije, preden se nenadoma vrne v prvotno stanje.

Zdaj pa vprašamo:

animacija-režija: obratna;

Vse se je obrnilo na glavo. Najprej se bo besedilo povečalo za kar 30 slikovnih pik, do 80, za preostalo animacijo pa se bo postopoma zmanjševalo in se na koncu vrnilo na prejšnjo velikost. Enostavno je.

Obrazec za animacijo

In to je morda ena najbolj zanimivih nastavitev, s katero lahko dolgo časa eksperimentirate. Privzeto se vse spremembe izvajajo z enako hitrostjo. Ta vrsta animacije se imenuje linearna, poleg nje pa obstajajo še druge.

Lep pozdrav, prijatelji! Danes si bomo ogledali zelo zanimivo temo - ustvarjanje CSS animacij na resničnem primeru. Vrhunec te vadnice bo ustvarjanje čudovite animacije CSS logotipa za milijon dolarjev.

Kul

Jecljati

Gradivo za lekcijo

• Viri: Prenos
• Osnovni primer iz lekcije: https://codepen.io/agragregra/pen/PKNavm
• Začetna predloga iz lekcije: https://github.com/agragregra/optimizedhtml-start-template

Malo teorije

Preden začnete ustvarjati animirani primer, morate pregledati osnove Animacije CSS, upoštevajte osnovne izraze, lastnosti in pravila Ustvarjanje CSS animacije.

Če ste že imeli izkušnje z ustvarjanjem animacij v kateri koli aplikaciji, kot sta Adobe After Effects ali stari Flash Professional (zdaj Adobe Animate), potem bi morali biti seznanjeni s koncepti, kot so »Ključni okvirji«, »Začasne funkcije ali dinamika gibanja«, ki, kot na katerem koli drugem področju ​animacije, veljajo za animacijo elementov na strani s pomočjo CSS. Vendar pa za razliko od dela z vmesniki aplikacij ustvarjate animacije CSS s pisanjem kode v urejevalniku.

Pravilo CSS @keyframes

Ustvarjanje animacije CSS se začne z deklaracijo imena animacije v bloku @keyframes in definiranje tako imenovanih korakov animacije ali ključnih okvirjev.

Za pregled teorije in osnov bomo uporabili čisti CSS, kasneje pa bomo na zahtevnejšem primeru uporabili predprocesor Sass. Več o Sass lahko izveste v lekciji. Poleg tega za globlje razumevanje osnov CSS priporočam tudi branje lekcij “Osnove CSS – vodnik za najmlajše” in “Vsi izbirniki CSS v eni lekciji”

Oglejmo si strukturo @keyframes in delo s ključnimi okvirji preprost primer:

@keyframes turning ( 0 % ( border-radius: 0 0 0 0; transform: rotate(0deg); ) 25 % ( border-radius: 50 % 0 0 0; transform: rotate(45deg); ) 50 % ( border- polmer: 50% 50% 0 0; transformacija: zasukaj(90deg); ) 75% (polmer meje: 50% 50% 50% 0; transformacija: zasukaj(135deg); ) 100% (polmer obrobe: 50% 50 % 50 % 50 %; transformacija: zasukaj (180 stopinj); ) )

V prvi vrstici vidimo, da po ključna beseda@keyframes njegovo ime je "obračanje". To je ime bloka okvirjev, na katerega se bomo sklicevali naprej.

Po deklaraciji se odpre zavit oklepaj (in v tem primeru na čisti CSS), v kateri so lastnosti zapisane zaporedno od 0 % do 100 % za vsak ključni okvir. Upoštevajte, da lahko med 0% in 100% vstavite poljubno število vmesnih vrednosti, pa naj bo to 50%, 75% ali celo 83%. To je zelo podobno časovnici aplikacije za animacijo, kjer lahko dodate katero koli vmesno stanje med dvema stanjema.

Nadalje lahko ta blok kode s ključnimi sličicami uporabimo za kateri koli izbirnik CSS, vendar so najpogosteje pripravljeni za določen izbirnik, če želimo doseči določeno vedenje iz želenega bloka.

Dostop do bloka ključnih okvirjev

Ko smo objektu nastavili ključne okvirje (v realnem življenju se to izvaja vzporedno ali celo po dostopu do bloka s ključnimi okvirji), lahko dostopamo do našega novo ustvarjenega bloka. Oglejmo si naslednjo preprosto kodo iz zgornjega primera:

Div (širina: 120 slikovnih pik; višina: 120 slikovnih pik; barva ozadja: vijolična; rob: 100 slikovnih pik; animacija: obračanje 2 s popuščanje 1 s neskončno izmenično; )

Nič posebnega do zadnje vrstice. Tukaj določimo, kako bo predmet prvotno izgledal, in v zadnji vrstici bloka se sklicujemo na blok ključnih okvirjev, imenovan "obračanje":

Animacija: obračanje 2 s popuščanje 1 s neskončno menjavanje;

Če je z definicijo ključnih okvirjev vse relativno jasno, potem ta vrstica potrebuje takojšnjo razlago. Kot vidimo, prvi pride Lastnost CSS"animacija". To je skrajšana oblika, kot je lastnost »margin: 20px 30px 40px 50px«, ki jo je mogoče razdeliti na več ločenih lastnosti:

Po tej analogiji lahko sestavljeno lastnost "animacija" razdelimo na več ločenih lastnosti:

Najpogosteje izkušeni razvijalci vseh teh lastnosti ne zapišejo ločeno, ampak uporabijo kratek zapis in njegova struktura je naslednja:

animacija: (1. animation-name - ime) (2. animation-duration - trajanje) (3. animation-timing-function dinamika gibanja) (4. animation-delay - premor pred začetkom) (5. animation-iteration- count - število usmrtitev) (6. animation-direction - smer)

Animacija: animationname 2s linearno 1s neskončno vzvratno

Iz primera vidimo, da dostopamo do bloka @keyframes animationname, nastavimo trajanje animacije na 2 sekundi, dinamika je linearna, pavza pred začetkom je 1 sekunda, animacija se ponavlja v nedogled in se izvaja v obratni smeri.

Kot sem že rekel, se kratek zapis začne z lastnostjo " animacija«, ki mu sledijo vrednosti, katerih zaporedje je bolje ne pozabiti, da ne bo zmede pri pisanju CSS animacije.

Vendar pa je večino teh lastnosti mogoče izpustiti, saj bodo najpogosteje njihove privzete vrednosti popolnoma zadovoljile večino nalog ustvarjanja animacij. Nekateri od njih morda niso napisani, ostalo pa je treba navesti v zaporedju, o katerem smo razpravljali prej. Na splošno, da vaša animacija deluje, potrebujete samo dva parametra v vaši sestavljeni lastnosti - ime ( ime-animacije) in trajanje ( animacija-trajanje).

CSS3 animacija je precej razširjena. Čas je, da tudi najbolj začetniki graditelji spletnih strani razumejo, kaj je animacija CSS in kako jo ustvariti. Morda mislite, da je animacija CSS3 namenjena premikanju blokov in je videti kot risanka. Toda pri animaciji CSS ne gre samo za premikanje elementa iz ene točke v drugo, ampak tudi za popačenje in druge transformacije. Da bo to jasno tudi začetnikom, sem vse zapisal korak za korakom.

1. Osnovne lastnosti CSS3 animacije

Majhen teoretični blok, iz katerega boste razumeli, katere lastnosti CSS3 so odgovorne za animacijo, pa tudi, katere vrednosti lahko sprejmejo.

• ime-animacije— edinstveno ime za animacijo (ključni okvirji, o njih bomo govorili spodaj).
• animacija-trajanje— trajanje animacije v sekundah.
• funkcija-časovne-animacije— krivulja spremembe hitrosti animacije. Na prvi pogled je zelo nejasno. Vedno je lažje pokazati s primerom, ki jih boste videli spodaj. Lahko ima naslednje vrednosti: linearno | enostavnost | olajšanje | olajšanje | kubični-bezier(n,n,n,n) .
• animacija-zakasnitev— zakasnitev v sekundah pred začetkom animacije.
• število ponovitev animacije— število ponovitev animacije. Določite ga lahko preprosto kot številko ali pa podate neskončno in animacija se bo izvajala neskončno.

Tukaj so samo osnovne lastnosti, ki so več kot dovolj za ustvarjanje vaše prve CSS3 animacije.

Zadnja stvar, ki jo moramo vedeti in razumeti iz teorije, je, kako ustvariti ključne okvirje. Tudi to je enostavno narediti in se izvaja s pravilom @keyframes, znotraj katerega so določeni ključni okvirji. Sintaksa za to pravilo je naslednja:

Zgoraj smo postavili prvi in ​​zadnji okvir. Vsa vmesna stanja bodo izračunana AVTOMATSKO!

2. Primer prave animacije CSS3

Teorija je, kot ponavadi, dolgočasna in ni vedno jasna. Veliko lažje je vse videti na pravem primeru, vendar je najbolje, da to naredite sami na kakšni testni HTML strani.

Pri učenju programskega jezika običajno napišete program “Hello, world!”, iz katerega lahko razumete sintakso tega jezika in nekatere druge osnovne stvari. Vendar ne preučujemo programskega jezika, ampak opisni jezik videz dokument. Zato bomo imeli svoj "Pozdravljen, svet!"

Na primer, naredili bomo naslednje: imejmo nekakšen blok