Kā pareizi izmantot CSS3 animācijas: apmācība, paraugu kodi un piemēri

Kad mēs izmantojam JS un jQuery, mums ir pilnīga kontrole pār animācijām un mēs varam radīt dažus satriecošus efektus, taču cena ir diezgan augsta. Apstrādes laiks, dažādu pārlūku savietojamība (piemēram, mobilās ierīces ir diezgan atšķirīgas, ja runājam par JS), un pats koda sarežģītība ir punkti, kas mums jāpatur prātā, veidojot animētus interfeisus..


Tātad, šodien mēs redzēsim, kā izvairīties no JS, izmantojot CSS animācijas un pārejas. Mēs apspriedīsim no pašiem pamata soļiem līdz dažiem satriecošiem efektiem, piemēram, akordeona paneļiem un animētām apakšizvēlnēm.

Satveriet vietu, piezīmju blociņu un īstu pārlūku (jebko, izņemot IE) un sāksim darbu.

Iesildīšanās

Mums ir diezgan daudz priekšrocību (un trūkumu kā visam mūsu dzīvē) CSS animāciju izmantošanā. Ja jums tie jāpārdod savam priekšniekam vai klientam, tas jums jāpatur prātā:

  • Tie ir potenciāli ātrāki, jo var izmantot aparatūras paātrinājumu (kā HTML5 ieviešanu)
  • Viņi labāk darbosies mobilajās ierīcēs, un nav nepieciešams īpašs kods, lai izsekotu notikumiem
  • JS ir jāinterpretē pārlūkprogrammai, un pārlūka pārtraukšanas iespējas ir daudz lielākas. Tātad, kad CSS neizdodas, tas klusībā neizdodas, kamēr JS var salauzt visu lapu
  • Viņiem ir diezgan labs pārlūka atbalsts (šī vietne palīdzēs jums pārbaudīt konkrētu statistiku par šo: http://caniuse.com/#search)

CSS3 animāciju piemēri

Pirms mēs sākam gatavot šo ziņu, apskatīsim dažas skaistas animācijas, kas izveidotas tīrā CSS.

Tīrs CSS čivināt Fail Whale

Animēts neveiksmīgs valis

 Izgatavots Stīvens Deniss, skatiet to darbībā.

Tīra CSS ritināšanas koksa kanna
CSS 3 animācijas piemēri: ritināšanas koksa kanna

Romāns Kortess, skat. Šo darbībā.

Tīrs CSS staigājošs cilvēks

CSS 3 animācijas piemēri: staigājošais cilvēks

 Izgatavots Endrjū Hojers, skatiet to darbībā.

Netīrumu saķeršana

Sāksim kodu. Animācijas aktivizēšanai mēs daudz izmantosim CSS pseidoklases. Godīgi sakot, daudzi izstrādātāji iesaka izmantot JS, lai aktivizētu un deaktivizētu animācijas, taču šeit mēs redzēsim vienkāršāku ceļu:

#pārbaude {
fons: sarkans;
}
#test: lidināties {
fons: zaļš;
}
#test: aktīvs {
fons: zils;
}
#test: target {
fons: melns;
}

Mums ir vēl dažas pseido klases, kuras izmantot, bet jums ir ideja! Tātad šeit notiek tas, kas noklikšķina uz elementa #test (pieņemot, ka tā ir saite):

  • Normāls stāvoklis: fons būs sarkans
  • Virziet kursoru: kad pele ieiet elementa apgabalā, tam būs zaļš fons
  • Aktīvs: Noklikšķinot uz tā un turpinot nospiest peles pogu, fona krāsa būs zila
  • Mērķis: ja pašreizējās lapas vietrādī URL ir # pārbaude, šis elements būs melns

Katru no šiem var izmantot CSS animācijām, piemēram, jūs varētu izveidot 2 saites, lai aktivizētu un deaktivizētu CSS animāciju, izmantojot mērķa pseidotipu ar šo kodu:

aktivizēt
deaktivizēt

CSS pārejas

CSS pāreja no sākotnējā uz beigu stāvokli notiks vienmērīgi. Tātad galvenajā atlasītājā, izmantojot īpašību “pāreja”, jūs definēsit laiku un katru īpašumu, kas tiks ietekmēts, un kādai jābūt animācijai. Apskatīsim piemēru:

.pārbaude {
/ * pārejas īpašuma ilguma laika funkcija, * /
krāsa: zila;
pāreja: krāsa 2s, fonta izmērs 2s atvieglojums;
}
.pārbaude: virziet kursoru {
krāsa: sarkana;
}
.tests: aktīvs {
fonta lielums: 200%;
}

Novietojot kursoru uz .testētā elementa, tā pakāpeniski mainīsies no zila uz sarkanu (kāda ir jauka palete, vai ne?) Noklikšķinot uz elementa, fonta lielums pakāpeniski palielinās līdz 200% no noklusējuma fonta lieluma.

Mums ir arī “pārejas laika” īpašums, kas iestatīts kā atvieglojums, lai iztērētu animācijai pieejamo “laiku”. Šīs ir iespējamās vērtības:

  • Lineārs: vienāds ātrums no sākuma līdz beigām
  • Vienkārša ievade: lēns sākums
  • Vienkāršība: lēns gals
  • Vienkāršība: lēns sākums, ātri pa vidu, pēc tam lēns gals
  • Vienkārša ieslēgšanās: lēns sākums, lēns beigas
  • Kubiskais slānis (a, b, c, d): pielāgots ātrums

Kubiskā Bezjē funkcija izveidos pielāgotu animāciju ar 4 cipariem, kas svārstās no 0 līdz 1, atspoguļojot matemātisko līkni animācijas ātrumam X.

Lai nodrošinātu labāku pārlūka savietojamību, jums jāapsver tāda operatora prefiksu izmantošana operētājsistēmai, Firefox un webkit, kā šis:

div {
platums: 400 pikseļi;
-o pāreja: platums 2s;
-moz-pāreja: platums 2s;
-webkit-pāreja: platums 2s;
pāreja: platums 2s;
}

Varat arī izmantot multivides vaicājumus, lai definētu dažādas pārejas atkarībā no pārlūka platuma (mobilās ierīces, planšetdatori). Šis ir vienkāršs piemērs:

ķermeņa {
fonta lielums: 1em;
}
@media ekrāns un (maksimālais platums: 800 pikseļi) {
ķermeņa {
fonta lielums: 0.8em;
}
}
@media ekrāns un (maksimālais platums: 400 pikseļi) {
ķermeņa {
Fonta lielums: 0.7em;
}
}

Šeit fonta lielums pēkšņi tiks mainīts, palielinot pārlūka platumu. Šis kods neļaus tam notikt, nodrošinot daudz vienmērīgāku pāreju:

ķermeņa {
-o pāreja: fonta lielums .5 ir lineārs;
-moz-pāreja: fonta lielums .5 ir lineārs;
-Web komplekta pāreja: fonta lielums .5 ir lineārs;
pāreja: fonta lielums .5 ir lineārs;
}

To var izmantot arī tad, ja portretam / ainavai ir dažādi displeji vai izmēri, ja vēlaties mainīt platumu, krāsas, polsterus, izvēlnes displeju.

CSS animācija – sākas īstā izklaide

Animācija ir pāreju virkne, kas definēta vienā atlasītājā. Lai definētu CSS animācijas, jums jāveic divas darbības.

@Keyframe kārtulu izmanto, lai definētu animācijas darbību secību, un to nosaka ar unikālu nosaukumu un stiliem, kas raksturo šīs animācijas darbību. Kā parasti, mums būs nepieciešami daži pārdevēja prefiksi, piemēram, šajā piemērā:

/ * vienāds kods katram pārdevējam * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * animācijas nosaukums * /
@keyframe my-animation {
/ * rāmja atlasītājs * /
0% {
/ * rāmja stils * /
Kreisais: 0 pikseļi;
Augšā: 0 pikseļi;
}
25% {
Kreisais: 200 pikseļi;
Augšā: 0 pikseļi;
}
50% {
Kreisais: 200 pikseļi;
Augšā: 200 pikseļi;
}
75% {
Kreisais: 0 pikseļi;
Augšā: 200 pikseļi;
}
100% {
Kreisais: 0 pikseļi;
Augšā: 0 pikseļi;
}
}

Tātad katru stilu nosaka rāmis / laika rāmis (tāpat kā tie kadri no flash animācijas) procentos un stili, kas tur būtu jāpiemēro. Piemēram, šis atslēgas kadrs saka, ka elements pārvietosies pa kreisi, tad augšpusē, tad pa labi, tad apakšā.

Pēc tam, kad esat veicis 1. darbību un izveidojis atslēgas kadru, jūs to faktiski varat lietot kādam elementam. Tad mēs izmantosim gandrīz to pašu loģiku, ko mēs darījām ar CSS pāreju, atšķirība ir tā, ka tagad mūsu “pāreja” ir daudz sarežģītāka animācija.

Lai to lietotu, mēs izmantosim animācijas īpašumu, un tam ir 7 apakšīpašumi:

  • Nosaukums: unikālais identifikators
  • Ilgums: Cik ilgs laiks būs nepieciešams no 0% līdz 100%
  • Laika funkcija: gandrīz tāda pati kā pārejas laika funkcija
  • Kavēšanās: Cik ilgs laiks būs nepieciešams, lai sāktu 0%
  • Ierāciju skaits: cik atkārtojumu mums būs (“bezgalīgs” bezgalīgai cilpai)
  • Virziens: parasts vai alternatīvs (pretējs)
  • Atskaņošanas stāvoklis: ja animācija darbojas vai ir apturēta

Mūsu animācija tiks piemērota elementam #test, ja tā ir lapas mērķauditorija:

#test: target {
/ * animācijas nosaukums | ilgums | laika funkcija | kavēšanās | iterāciju skaits | virziens | spēles stāvoklis * /
animācija: mana animācija 10s lineāri 0s bezgalīgi normāli darbojas;
}

Paturot to prātā, mēs varam izveidot dažus satriecošus piemērus.

Tikai CSS akordeons

Mēs izveidosim saliekamus paneļus, izmantojot CSS animācijas. Šeit ir HTML pamata struktūra:

1. cilne

1. TEKSTS

2. cilne

2. TEKSTS

3. tab

3. TEKSTS

Tas tikai izveidos paneļus un saiti, kas aktivizēs katru no tiem. Un šeit notiek maģija:

/ * jebkura divdaļa, kas atrodas akordeona iekšpusē * /
.akordeona div {
/ * pēc noklusējuma ir paslēpts * /
augstums: 0;
pārpilde: slēpta;
/ * melnā maģija * /
pāreja: augstums 1s;
}
/ * kad minētais div ir mērķis * /
.akordeona div: mērķis {
/ * augstums: auto nedarbosies, bet tas darbosies labi * /
augstums: 80 pikseļi;
}

Diezgan vienkārši, vai ne? Un jūs visu savu dzīvi esat pavadījis, izmantojot JS? 🙂

Tikai CSS izvēlne ar apakšizvēlnēm

Un tas ir vēl viens diezgan vienkāršs lietojums. Jums noteikti ir navigācijas izvēlne jūsu vietnē, un bieži vien mums tur ir jāizmanto dažas apakšizvēlnes. Labākais veids, kā parādīt un slēpt priekšmetus, ir jQuery izmantošana, vai ne? Nu, pēc šī koda pārbaudīšanas padomājiet vēlreiz:

  • 1. postenis
    • 1.1
    • 1.2
  • 2. postenis
    • 2.1
    • 2.2

Un burvība sākas šeit:

a {
/ * vienkārši padarot saites labākas *
displejs: bloķēt;
polsterējums: 4px;
}
nav {
text-align: centrs;
}
/ * jebkura izvēlne (ieskaitot galveno) * /
nav ul {
displejs: inline-block;
saraksta stils: nav;
}
nav>ul>li {
/ * horizontāli priekšmeti (arī vertikāli darbosies labi) * /
pludiņš: pa kreisi;
}
nav li div {
/ * sakļaujot jebkuru apakšizvēlni * /
augstums: 0;
pārpilde: slēpta;
/ * Houdini jūtas * /
pāreja: augstums 1s;
}
nav li: lidināties>div {
augstums: 56 pikseļi;
}

Summējot

Tas noteikti ir tikai darba sākšanas ceļvedis. Ir daudz citu lielisku efektu, ko var izdarīt, izmantojot tikai CSS animācijas, un daudzas lietas, kas vēl ir gaidāmas.

Tātad, vai jūs to iepriekš esat izmantojis? Vai varat iedomāties citu labu lietojumu CSS animācijām? Dalieties savās domās, izmantojot komentārus!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me