Kā izmantot CSS3 pārejas un animācijas, lai izceltu lietotāja interfeisa izmaiņas

Dizaineriem un māksliniekiem ir ilgstoša eksperimentēšana ar kustībām, efektiem un dažāda veida ilūzijām ar mērķi pievienot papildu slāni savam darbam. Op art kustība sāka izmantot optiskās ilūzijas 1960. gados, lai radītu iespaidu par kustību.

Kopš tā laika ir parādījušās jaunākas un jaunākas pieejas, piemēram, nesen populārā kinētiskā māksla, kas paplašina skatītāja perspektīvu, izmantojot daudzdimensiju kustību. Kustība arī parādījās datorzinātnēs ar pirmā mirgojošā kursora izgudrojumu 1967. gadā.

Front-end attīstības DOM elementi parasti tika animēti ar JavaScript, pirms CSS3 tika izlaists, un tā ir metode, kas joprojām darbojas, bet CSS3 ieviestās jaunās īpašības ļauj uzlabot mūsu dizainu ar dažādiem efektiem un kustību intuitīvāk.

Divi galvenie paņēmieni CSS3 piedāvā pārejas un animācijas. Šajā amatā mēs aplūkosim, kas tie ir, kāda ir atšķirība starp tiem un kā jūs varat tos izmantot.

Pārejas

Pārejas un animācijas tiek izmantotas vizualizēt izmaiņas valstī HTML elementu modificēt vienu vai vairākas tās CSS īpašības.

Vienkāršākais stāvokļa maiņas vizualizācijas veids ir pogas vai saites krāsas maiņa, kad tas ir piestiprināts. Kad tas notiek, elements saņem nedaudz atšķirīgu stilu, ko skatītājs parasti pamana, it kā kaut kas būtu pārvietots uz ekrāna.

Saites CSS īpašību maiņa uz lidmašīnas (vai fokusa vai klikšķa) ir vecākā un vienkāršākā pāreju forma, un tā pastāvēja jau pirms CSS3 laikmeta.

 a krāsa: oranža;  a: lidināties krāsa: sarkana;  a: fokuss krāsa: zils;  a: apmeklētais krāsa: zaļa; 

Pārejas tiek izmantotas, ja HTML elements mainās no vienas iepriekš definētas valsts uz citu. CSS3 ieviesa jaunas īpašības, kas ļauj veikt sarežģītākas vizualizācijas nekā agrāk, piemēram, laika funkcijas vai ilguma kontrole.

Apskatīsim jaunās CSS īpašības nākamajā sadaļā pēc tam, kad būsim sapratis, kā animācijas atšķiras. Tagad redzēsim svarīgākās lietas, kas jums jāzina par pārejām.

1. Viņiem vienmēr ir sākuma un beigu stāvoklis.
2. Starp sākuma un beigu punktiem esošie stāvokļi ir netieši definēti pārlūkprogrammā, mēs to nevaram mainīt ar CSS.
3. Tie prasa skaidra iedarbināšana, piemēram, pievienojot jaunu pseudoklasu CSS, vai jaunu klasi ar jQuery.

Jūs varat redzēt skaistu piemēru gudri izmantotām CSS3 pārejām zemāk, kurā autors atklāj slēpto informāciju tādā veidā, kas nav uzmācīgs, bet joprojām vērš lietotāju uzmanību uz jauno saturu.

Animācijas

Ja mēs vēlamies vizualizēt stāvokļa izmaiņas ar sarežģītākām kustībām vai ja mums nav skaidra sprūda, piemēram, ja mēs vēlamies sākt efektu, kad lapa ielādējas, animācijas ir ceļš.

Animācijas ļauj noteikt sarežģītāku ceļu, nosakot un konfigurējot mūsu pašu atslēgas rāmji. Atslēgu rāmji ir starppunkti animācijas gaitā, kas ļauj mainīt animētā elementa stilu tik daudz reižu, cik mēs vēlamies.

Lai gan CSS3 piedāvā lieliskus veidus, kā veidot izsmalcinātas animācijas, parasti tos ir grūtāk veidot nekā pārejas, tāpēc ir daudzas lieliskas animācijas bibliotēkas, kas var atvieglot mūsu darbu..

Svarīgākās lietas, kas jāzina par CSS3 animācijām, ir:

1. tiem nav nepieciešama skaidra iedarbināšana, tie var sākties lappuses ielādē vai tad, kad pārlūkprogrammā notiek cits DOM pasākums
2. tos var izmantot gadījumos, kad tiek izmantotas pārejas, piemēram, ja tiek pievienota vai noņemta jauna klase vai pseidoklass (lai gan tas ir retāks lietošanas gadījums)
3. viņiem ir nepieciešams definēt dažus atslēgu karkasus (starpposma valstis)
4. mēs varam norādīt šo atslēgas rāmju skaitu, biežumu un stilu

Zemāk redzamajā piemērā var redzēt atdzist animētu nolaižamo izvēlni. Animācija sākas, kad mēs noklikšķinām uz pogas. Tas tiek panākts, pievienojot papildu klases saraksta elementiem ar jQuery, kad notiek klikšķa notikums.

Šīs jaunās klases tiek animētas ar norādīto @ taustiņi noteikumi CSS failā. Papildu klases tiek noņemtas ar jQuery, kad lietotājs noklikšķina uz pogas nākamajā reizē, un izvēlne atkal paslēpsies.

CSS rekvizīti un @ taustiņi Noteikumi

Pārejām mēs varam izmantot vai nu pāreju īpašumtiesības, vai 4 ar vienu pāreju saistītās īpašības: pārejas īpašums, pārejas ilgums, pārejas laika noteikšanas funkcija, un pārejas kavēšanās. Īslaicīgajā īpašumā ir visas atsevišķās īpašības saīsinātā veidā.

Animācijām ir animācija stenogrāfisks īpašums mūsu rokās, kas apzīmē ne mazāk kā 8 atsevišķas animācijas īpašības, proti, animācijas nosaukums, animācijas ilgums, animācijas un laika noteikšanas funkcija, animācijas aizture, animācijas-iterācijas skaits, animācijas virziens, animācijas-aizpildīšanas režīms, un animācijas-play-state.

Svarīgākais ar pārejām un animācijām ir tas, ka mēs vienmēr esam nepieciešams norādīt CSS rekvizītus, kas tiks mainīti valsts maiņas laikā. Ar pārejām tas izskatās šādi:

 .elements fons: oranžs; pārejas īpašums: fons; pārejas ilgums: 3s; pārejas laika noteikšanas funkcija: vieglums;  .elements: lidināties fons: sarkans; 

Mēs norādījām fona īpašums, jo pārejas laikā tas tiks mainīts.

Vienā pārejā varam mainīt vairāk nekā vienu CSS īpašumu, šajā gadījumā iepriekš minētais kods tiks mainīts šādi: pārejas īpašums: fons, robeža;. Mēs varam izmantot arī pārejas īpašums: visi;, ja mēs nevēlamies norādīt katru īpašumu atsevišķi.

Mēs varam izvēlēties īsfilmu pāreju arī īpašums. Ja mēs to darīsim, mums vienmēr jāpievērš uzmanība pareizo iekšējo īpašību secībai (skatiet dokumenta sintaksi).

 .elements fons: oranžs; pāreja: fona 3s vieglums;  .elements: lidināties fons: sarkans; 

Ja mēs vēlamies izveidot animāciju, mums ir nepieciešams norādīt saistīto atslēgas rāmji. CSS īpašības ir jāmaina atsevišķi @ taustiņi at-noteikumi. Šeit ir piemērs tam, kā mēs to varam izdarīt:

 .elements pozīcija: relatīvais; animācijas nosaukums: slaids; animācijas ilgums: 3s; animācijas un laika noteikšanas funkcija: vieglums;  @keyframes slide 0% pa kreisi: 0;  50% pa kreisi: 200px;  100% pa kreisi: 400px; 

Iepriekš minētajā piemērā mēs izveidojām ļoti vienkāršu slīdošo efektu. Mēs definējām animācijas nosaukums, pēc tam piesaistīja 3 atslēgas karkasus, kurus mēs norādījām @keyframes slide … at-noteikumi. Procenti attiecas uz animācijas ilgumu, tāpēc 50% notiek piemērā 1.5s.

Mēs varētu izmantot stenogrāfiju animācija arī var definēt atslēgas rāmjus ar vienkāršāku no uz rīkoties šādi:

 .elements pozīcija: relatīvais; animācija: slaidu 3s vieglums;  @keyframes slide no left: 0;  uz left: 400px; 

Sarežģītāku animāciju veidošana ir tās pašas mākslas forma, ja jūs interesē, varat izlasīt divus no mūsu animācijas apmācībām par to, kā izveidot modernu telti un kā izveidot atlēcienu efektu.

Veidojot pārejas un animācijas, tas ir jāzina ne visas CSS īpašības var tikt animētas, tāpēc vienmēr ir laba ideja, lai pārbaudītu īpašumu, kuru vēlaties mainīt CSS Animatable.

CSS3 animācijas un pārejas ilgu laiku strādāja ar pārdevēja prefiksu, ko mums vairs nav nepieciešams izmantot, tomēr Mozilla Developer Network joprojām iesaka pievienot -webkit uzreiz, jo atbalsts Webkit balstītām pārlūkprogrammām tikai nesen sasniedzis stabilitāti.