mājas › Datoru remonts › Animācijas CSS piemēri un gatavs kods. Animācijas CSS piemēri un gatavu kodu Pure CSS logotipi

Animācijas CSS piemēri un gatavs kods. Animācijas CSS piemēri un gatavu kodu Pure CSS logotipi

| 18.02.2016

CSS3 paver neierobežotas iespējas UI dizaineriem, un galvenā priekšrocība ir tā, ka gandrīz jebkuru ideju var viegli īstenot un īstenot dzīvē, neizmantojot JavaScript.

Tas ir pārsteidzoši, cik vienkāršas lietas var atdzīvināt parastu tīmekļa lapu un padarīt to pieejamāku lietotājiem. Mēs runājam par CSS3 pārejām, ar kurām jūs varat ļaut elementam pārveidot un mainīt stilu, piemēram, virzot kursoru. Zemāk pieejamie deviņi CSS3 animācijas piemēri palīdzēs jums izveidot atsaucīgu sajūtu jūsu vietnē, kā arī uzlabot lapas kopējo izskatu ar skaistām, vienmērīgām pārejām.

Lai iegūtu sīkāku informāciju, varat lejupielādēt arhīvu ar failiem.

Visi efekti darbojas, izmantojot pārejas īpašumu. pāreja- “pāreja”, “pārveidošana”) un pseidoklase: kursors, kas nosaka elementa stilu, kad peles kursors atrodas virs tā (mūsu pamācībā). Savos piemēros mēs izmantojām 500 x 309 pikseļus div, sākotnējo fona krāsu #6d6d6d un pārejas ilgumu 0,3 sekundes.

Body > div ( platums: 500 pikseļi; augstums: 309 pikseļi; fons: #6d6d6d; -webkit-transition: viss 0,3 s vieglums; -moz-transition: viss 0,3 s vieglums;; -o-transition: viss 0,3 s vieglums;; pāreja: viss 0,3 s vieglums;)

1. Mainiet krāsu, virzot kursoru

Kādreiz šāda efekta ieviešana bija diezgan rūpīgs darbs, veicot noteiktu RGB vērtību matemātiskus aprēķinus. Tagad pietiek uzrakstīt CSS stilu, kurā atlasītājam jāpievieno pseidoklase: virzīt kursoru un iestatīt fona krāsu, kas vienmērīgi (0,3 sekundēs) nomainīs sākotnējo fona krāsu, virzot kursoru virs bloka:

Krāsa: kursors (fons: #53ea93; )

2. Rāmja izskats

Interesanta un pārsteidzoša transformācija ir iekšējais rāmis, kas vienmērīgi parādās, turot peles kursoru. Labi piemērots dažādu pogu dekorēšanai. Lai panāktu šo efektu, mēs izmantojam pseido-class:hover un box-shadow rekvizītu ar inset parametru (iestata ēnu elementa iekšpusē). Turklāt jums būs jāiestata ēnas stiepums (mūsu gadījumā tas ir 23 pikseļi) un tā krāsa:

Robeža: kursors (lodziņa ēna: ielaidums 0 0 0 23 pikseļi #53ea93; )

3. Šūpoles

Šī CSS animācija ir izņēmums, jo šeit netiek izmantots pārejas rekvizīts. Tā vietā mēs izmantojām:

@keyframes ir pamatdirektīva kadru pēc kadra CSS animācijas izveidei, kas ļauj veikt t.s. scenāriju un aprakstiet animāciju kā galveno punktu sarakstu;
animācija un animācijas iterāciju skaits - īpašības animācijas parametru (ilgums un ātrums) un ciklu (atkārtojumu) iestatīšanai. Mūsu gadījumā atkārtojiet 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px);) ) 40% ( -webkit-transform: translateX(6px); pārveidot: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); pārveidot: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); pārveidot: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: tulkotX(9px); pārveidot: tulkotX(9px); ) 30% ( -webkit-transform: translateX(-9px); pārveidot: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); pārveidot : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); pārveidot: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transformate: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0,6s easy; animācija: swing 0,6s vieglums; -webkit-animation-itration-count: 1; animācijas atkārtojumu skaits: 1; )

4. Vājināšanās

Izbalēšanas efekts būtībā ir vienkārša elementa caurspīdīguma maiņa. Animācija tiek veidota divos posmos: vispirms jāiestata sākotnējais caurspīdīguma stāvoklis uz 1 - tas ir, pilnīga necaurredzamība, un pēc tam jānorāda tā vērtība, virzot peles kursoru - 0,6:

Izbalināt (necaurredzamība: 1; ) .fade:hover (necaurredzamība: 0,6; )

Lai iegūtu pretēju rezultātu, samainiet vērtības:

5. Palielinājums

Lai palielinātu bloku, novietojot kursoru virs tā, mēs izmantosim transformācijas rekvizītu un iestatīsim to mērogā (1.2) . Šajā gadījumā bloks palielināsies par 20 procentiem, saglabājot tā proporcijas:

Grow:hover ( -webkit-transform: scale (1.2); -ms-transform: scale (1.2); transform: scale (1.2); )

6. Samazināšana

Elementa samazināšana ir tikpat vienkārša kā tā palielināšana. Ja piektajā punktā, lai palielinātu skalu, mums vajadzēja norādīt vērtību, kas ir lielāka par 1, tad, lai samazinātu bloku, mēs vienkārši norādīsim vērtību, kas būs mazāka par vienu, piemēram, skala(0,7) . Tagad, novietojot peles kursoru, bloks proporcionāli samazināsies par 30 procentiem no tā sākotnējā izmēra:

Shrink:hover ( -webkit-transform: scale (0.7); -ms-transform: scale (0.7); transform: scale (0.7); )

7. Pārvēršanās aplī

Viena no biežāk izmantotajām animācijām ir taisnstūrveida elements, kas, virzot kursoru virsū, pārvēršas par apli. Izmantojot CSS rekvizītu border-radius, kas tiek lietots kopā ar :hover un transfer , to var panākt bez problēmām:

Aplis: virzīt kursoru (apmales rādiuss: 70%; )

8. Rotācija

Jautra animācijas iespēja ir pagriezt elementu par noteiktu grādu skaitu. Lai to izdarītu, mums atkal būs nepieciešams transformācijas rekvizīts, bet ar citu vērtību - rotateZ(20deg) . Izmantojot šos parametrus, bloks tiks pagriezts par 20 grādiem pulksteņrādītāja virzienā attiecībā pret Z asi:

Pagriezt: virzīt kursoru ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20de); transformēt: pagrieztZ(20deg); )

9. 3D ēna

Dizaineru viedokļi atšķiras par to, vai šis efekts ir piemērots plakanā dizainā. Tomēr šī CSS3 animācija ir diezgan oriģināla un tiek izmantota arī tīmekļa lapās. Trīsdimensiju efektu panāksim, izmantojot jau pazīstamās box-shadow īpašības (izveidosim daudzslāņu ēnu) un transformēsim ar parametru translateX(-7px) (nodrošināsim bloka horizontālu nobīdi pa kreisi par 7 pikseļiem ):

Trīs pikseļi: kursors (box-ēna: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 3px 3px #53ea93, 3px 3px #53ea93, 3px 3px 6p 3; -webkit-transform: translateX( -7px); pārveidot: translateX(-7px); )

Pārlūka atbalsts

Pārejas rekvizītu pašlaik atbalsta šādas pārlūkprogrammas:

Darbvirsmas pārlūkprogrammas
Internet Explorer	Atbalsta IE 10 un jaunākas versijas
Chrome	Atbalstīts no 26. versijas (līdz 25. versija darbojas ar prefiksu -webkit-)
Firefox	Atbalstīts no 16. versijas (versijās 4–15 tas darbojas ar prefiksu -moz-)
Opera	Atbalstīts no versijas 12.1
Safari	Atbalstīts no versijas 6.1 (versijās 3.1-6 tas darbojas ar prefiksu -webkit-)

Pārējos šajos piemēros izmantotos rekvizītus, piemēram, transform , box-shadow u.c., atbalsta arī gandrīz visas mūsdienu pārlūkprogrammas. Tomēr, ja plānojat izmantot šīs idejas savos projektos, mēs ļoti iesakām vēlreiz pārbaudīt saderību starp pārlūkprogrammām.

Mēs ceram, ka šie CSS3 animācijas piemēri jums bija noderīgi. Novēlam radošus panākumus!

CSS3 animācija tiek izmantota diezgan plaši. Pat visjaunākajiem vietņu veidotājiem ir pienācis laiks saprast, kas ir CSS animācija un kā to izveidot. Varētu domāt, ka CSS3 animācijas mērķis ir likt blokiem kustēties, un tā izskatās pēc multfilmas. Taču CSS animācija ir ne tikai elementa pārvietošana no viena punkta uz otru, bet arī kropļojumi un citas transformācijas. Lai tas būtu skaidrs pat iesācējiem, es visu pierakstīju soli pa solim.

1. CSS3 animācijas pamatīpašības

Neliels teorētisks bloks, no kura jūs sapratīsit, kuri CSS3 rekvizīti ir atbildīgi par animāciju, kā arī kādas vērtības tie var iegūt.

animācijas nosaukums— unikāls animācijas nosaukums (atslēgas rāmji, par tiem mēs runāsim tālāk).
animācijas ilgums— animācijas ilgums sekundēs.
animācijas laika funkcija— animācijas ātruma maiņas līkne. No pirmā acu uzmetiena tas ir ļoti neskaidrs. To vienmēr ir vieglāk parādīt ar piemēru, un jūs tos redzēsit tālāk. Var iegūt šādas vērtības: lineārs | vieglums | vieglums | atvieglojums | cubic-bezier(n,n,n,n) .
animācijas aizkave— aizkave sekundēs pirms animācijas sākuma.
animācijas atkārtojumu skaits— animācijas atkārtojumu skaits. To var norādīt vai nu vienkārši kā skaitli, vai arī norādīt bezgalīgu, un animācija darbosies bezgalīgi.

Šeit ir tikai pamata rekvizīti, kas ir vairāk nekā pietiekami, lai izveidotu savu pirmo CSS3 animāciju.

Pēdējā lieta, kas mums jāzina un jāsaprot no teorijas, ir atslēgas rāmju izveide. To ir arī viegli izdarīt, un tas tiek darīts, izmantojot @keyframes kārtulu, kurā ir norādīti atslēgu kadri. Šī noteikuma sintakse ir šāda:

Virs mēs iestatām pirmo un pēdējo kadru. Visi starpstāvokļi tiks aprēķināti AUTOMĀTISKI!

2. Īsts CSS3 animācijas piemērs

Teorija, kā parasti, ir garlaicīga un ne vienmēr skaidra. Daudz vienkāršāk ir redzēt visu, izmantojot reālu piemēru, taču vislabāk to izdarīt pats kādā testa HTML lapā.

Apgūstot programmēšanas valodu, parasti tiek uzrakstīta programma “Sveika, pasaule!”, no kuras var saprast šīs valodas sintaksi un dažas citas pamata lietas. Bet mēs nepētām programmēšanas valodu, bet valodu dokumenta izskata aprakstīšanai. Tāpēc mums būs savs "Sveika, pasaule!"

Piemēram, mēs darīsim tālāk norādītās darbības.ļaujiet mums izveidot kaut kādu bloku

sākotnēji būs 800 pikseļu platums, un tas tiks samazināts līdz 100 pikseļiem 5 sekundēs.

Šķiet, ka viss ir skaidrs – vajag tikai bloku saspiest

un tas arī viss! Paskatīsimies, kā tas izskatās patiesībā.

Vispirms HTML marķējums. Tas ir ļoti vienkārši, jo mēs strādājam tikai ar vienu elementu katrā lapā.

1	<div class = "toSmallWidth" >

Un lūk, kas ir stila failā:

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

.toSmallWidth (piemale: 20px auto; /*ārējās piemales 20 pikseļu augšdaļā un apakšā un līdzinājums vidū*/ fons:sarkans; /*sarkans bloka fons*/ augstums: 100 pikseļi; /*bloka augstums 100px*/ platums: 800 pikseļi; /*sākotnējais platums 800 pikseļi*/-webkit-animation-name: animWidthSitehere; -tīmekļa komplekta animācijas ilgums: 5 s; /* īpašums ar prefiksu pārlūkprogrammām Chrome, Safari, Opera */ animācijas nosaukums : animWidthSitehere; /* norāda atslēgu rāmju nosaukumus (atrodas zemāk)*/ animācijas ilgums: 5s; /*iestatiet animācijas ilgumu*/ } /* atslēgkadri ar prefiksu pārlūkprogrammām Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere ( no (platums: 800 pikseļi;) līdz (platums: 100 pikseļi;)) @keyframes animWidthSitehere ( no (platums: 800 pikseļi;) /*pirmais atslēgas kadrs, kurā bloka platums ir 800 pikseļi*/ līdz (platums: 100 pikseļi;) /*pēdējais atslēgas kadrs, kur bloka platums ir 100 pikseļi*/ }

Kā redzat, mēs norādījām tikai pirmo un pēdējo atslēgas rāmi, un visi starpposma rāmi tika “uzbūvēti” automātiski.

Jūsu pirmā CSS3 animācija ir gatava. Lai nostiprinātu iegūtās zināšanas, izveidojiet HTML dokumentu un CSS failu un ievietojiet (vai vēl labāk, ierakstiet ar roku) kodu no piemēra. Tad tu noteikti visu sapratīsi. Pēc tam mēģiniet to pašu ar bloka augstumu (tam vajadzētu samazināties augstumā), lai nostiprinātu materiālu.

3. Sarežģītāki CSS3 animācijas piemēri

Iepriekš jūs uzzinājāt, kā viegli izveidot CSS3 animāciju. Ja mēģinājāt to izdarīt ar savām rokām, jūs jau sapratāt visu procesu un tagad vēlaties uzzināt, kā izveidot sarežģītāku un skaistāku animāciju. Un to tiešām var izveidot. Zemāk ir 3 nodarbības, kurās animācija tiek veidota tāpat kā iepriekš minētajā piemērā.

Mēs nesen to redzējām pārejas- tas ir tikai veids animācijas stila īpašības no oriģināls pirms tam galīgais stāvokli.

Tātad pārejas CSS ir specifisks animācijas veids, kur:

ir tikai divi stāvokļi: sākums un beigas;
animācija nav cilpa;
starpstāvokļi tiek kontrolēti tikai ar laika funkciju.

Bet ko darīt, ja vēlaties:

kontrolēt starpposma valstis?
cilpa animācija?
izveidot dažāda veida animācijas viens elements?
animēt tikai konkrētu īpašumu puse veidus?
atdarināt dažādas laika funkcijas dažādiem īpašumiem?

Animācija CSS ļauj jums darīt visu šo un daudz ko citu.

Animācija ir kā mini filma, kurā jūs kā režisors dodat norādījumus (stila noteikumus) saviem aktieriem (HTML elementi) dažādām ainām (atslēgas kadriem).

Animācijas īpašības

Tāpat kā pāreja, arī animācijas rekvizīts ir saīsināti dažiem citiem:

animācijas nosaukums: animācijas nosaukums;
animācijas ilgums : cik ilgi animācija ilgst;
animācijas laika funkcija: kā tiek aprēķināti starpstāvokļi;
animācijas aizkave: animācija sākas pēc kāda laika;
animation-itration-count : cik reižu animācija jāizpilda;
animācijas virziens : vai kustībai jānotiek pretējā virzienā vai nē;
animācijas aizpildīšanas režīms: kādi stili tiek lietoti pirms animācijas sākuma un pēc tās beigām.

Ātrs piemērs

Lai animētu lejupielādes pogu, varat uzrakstīt animāciju atlecošs:

@keyframes atlēcieni( 0% ( apakšā: 0; lodziņa ēna: 0 0 5 pikseļi rgba(0,0,0,0,5); ) 100% ( apakšā: 50 pikseļi; lodziņa ēna: 0 50 pikseļi 50 pikseļi rgba(0,0, 0,0,1); ) .loading-button ( animācija: lēciens 0,5 s cubic-bezier(0,1,0,25,0,1,1) 0 s bezgalīgi alternatīvi abi; )

Vispirms jums ir jāuzraksta reāla atlēcoša animācija, izmantojot @keyframes, un jāizsauc tā.

ES izmantoju saīsināti animācijas īpašums un iekļautas visas iespējamās iespējas:

animācijas nosaukums: atlecošs (tāds pats kā atslēgas kadra nosaukums)
animācijas ilgums: 0,5 s (pussekunde)
animācijas laika funkcija: cubic-bezier(0.1,0.25,0.1,1)
animācijas aizkave: 0 s (bez aizkaves)
animācijas atkārtojumu skaits: bezgalīgs (atskaņo bezgalīgi)
animācijas virziens: alternatīvs (virzās uz priekšu un atpakaļ)
animācijas aizpildīšanas režīms: abi

@keyframes

Pirms animācijas pielietošanas HTML elementiem, jums ir nepieciešams rakstīt animāciju, izmantojot atslēgas kadrus. Kopumā atslēgas rāmji ir katrs starpposms animācijā. Tos nosaka, izmantojot procentus:

0% - animācijas pirmais solis;
50% ir animācijas pusceļš;
100% ir pēdējais solis.

Varat arī izmantot atslēgvārdus no un līdz, nevis attiecīgi 0% un 100%.

Varat definēt tik daudz atslēgkadru, cik vēlaties, piemēram, 33%, 4% vai pat 29,86%. Praksē jūs uzrakstīsit tikai dažus no tiem.

Katrs atslēgas kadrs ir CSS noteikums, tas nozīmē, ka varat rakstīt CSS rekvizītus kā parasti.

Lai definētu animāciju, vienkārši ierakstiet ar to atslēgvārdu @keyframes nosaukums:

@atslēgkadri ap ( 0% ( pa kreisi: 0; augšā: 0; ) 25% ( pa kreisi: 240 pikseļi; augšā: 0; ) 50% ( pa kreisi: 240 pikseļi; augšā: 140 pikseļi; ) 75% ( pa kreisi: 0; augšā: 140 pikseļi ; ) 100% ( pa kreisi: 0; augšā: 0; ) ) p ( animācija: aptuveni 4 s lineāra bezgalība; )

Ņemiet vērā, ka sākums 0% un beigas 100% satur vienādi noteikumi CSS. Tas nodrošina nevainojamu animācijas cilpu. Tā kā iterācijas skaitītājs ir iestatīts uz bezgalīgu , animācija mainīsies no 0% līdz 100% un pēc tam nekavējoties atpakaļ līdz 0% un tā uz nenoteiktu laiku.

animācijas nosaukums

Vārds animācija tiek izmantota vismaz divreiz:

plkst rakstīšana animācijas, izmantojot @keframes ;
plkst izmantot animācija, izmantojot rekvizītu animācijas nosaukums (vai animācijas saīsinājuma rekvizītu).

@keyframes neatkarīgi ( /* ... */ ) .selector ( animācijas nosaukums: neatkarīgi; )

Līdzīgi kā CSS klašu nosaukumos, animācijas nosaukumā var iekļaut tikai:

burti (a-z);
cipari (0-9);
pasvītrojums(_);
defise (-).

Nosaukums nevar sākties ar ciparu vai divām defisēm.

animācijas ilgums

Tāpat kā pārejas ilgumu, arī animācijas ilgumu var iestatīt uz sekundes(1s) vai milisekundes(200 ms).

Atlasītājs ( animācijas ilgums: 0,5 s; )

Noklusējuma vērtība ir 0s, kas nozīmē, ka animācijas nav vispār.

animācijas laika funkcija

Līdzīgi kā pārejas laika funkcijas, var izmantot arī animācijas laika funkcijas atslēgvārdi, piemēram, lineārs , atvieglojums vai var tikt definēts, izmantojot patvaļīgus Bezjē līknes.

Selektors (animācijas laika funkcija: atvieglošana un izslēgšana;)

Noklusējuma vērtība: vieglums.

Tā kā CSS animācija izmanto atslēgas kadrus, varat iestatīt lineārs laika funkcija un simulēt specifisko Bezjē līkni, definējot daudzi ļoti specifiski atslēgu rāmji. Lai iegūtu uzlabotu animāciju, skatiet vietni Bounce.js.

animācijas aizkave

Tāpat kā pārejas aizkaves gadījumā, var iestatīt animācijas aizkavi sekundes(1s) vai milisekundes(200 ms).

Noklusējums ir 0s, kas nozīmē, ka nav nekādas kavēšanās.

Noder, iekļaujot vairākas animācijas sērija.

A, .b, .c ( animācija: atlec 1 s; ) .b ( animācijas aizkave: 0,25 s; ) .c ( animācijas aizkave: 0,5 s; )

animācijas atkārtojumu skaits

Pēc noklusējuma tiek atskaņota tikai animācija vienreiz(vērtība 1). Varat iestatīt trīs veidu vērtības:

veseli skaitļi, piemēram, 2 vai 3;
daļskaitļi, piemēram, 0,5, kas atskaņos tikai pusi no animācijas;
bezgalīgais atslēgvārds, kas atkārtos animāciju bezgalīgi.

.selector ( animācijas iterāciju skaits: bezgalīgs; )

animācijas režija

Animācijas virziena rekvizīts norāda, vai kādā secībā tiek nolasīti atslēgu rāmji.

normāls : sākas ar 0%, beidzas ar 100%, atkal sākas no 0%.
reverse : sākas ar 100%, beidzas ar 0%, sākas no 100% no jauna.
alternatīva: sākas ar 0%, pāriet uz 100%, atgriežas pie 0%.
alternate-reverse : sākas ar 100%, pāriet uz 0%, atgriežas uz 100%.

To ir vieglāk iedomāties, ja animācijas atkārtojumu skaits ir iestatīts uz bezgalīgu.

animācijas aizpildīšanas režīms

Animācijas aizpildīšanas režīma rekvizīts nosaka, kas notiek pirms tam animācijas sākums un pēc tā pabeigšana.

Nosakot atslēgu rāmji var norādīt CSS noteikumi, kas tiks lietots dažādos animācijas posmos. Tagad šie CSS noteikumi var saduras ar tiem, kuri jau pieteikts uz animētiem elementiem.

animācijas aizpildīšanas režīms ļauj norādīt pārlūkprogrammai, ja animācijas stili Arī būtu jāpiemēro ārpus animācijas.

Iedomāsimies pogu, kurš ir:

sarkans noklusējuma;
kļūst zils animācijas sākumā;
un beigās zaļš kad animācija ir pabeigta.

CSS animācijasļauj animēt pārejas no vienas CSS stila konfigurācijas uz citu. Animācijas sastāv no diviem komponentiem: stila, kas apraksta CSS animāciju, un atslēgu kadru kopas, kas norāda animācijas stila sākuma un beigu stāvokli, kā arī iespējamos starpposma punktus.

CSS animācijām ir trīs galvenās priekšrocības salīdzinājumā ar tradicionālajām skriptu vadītajām animācijas metodēm:

Tos ir viegli izmantot vienkāršām animācijām; jūs varat tos izveidot, pat nezinot JavaScript.
Animācijas darbojas labi pat ar mērenu sistēmas slodzi. Vienkāršas animācijas bieži vien var slikti darboties JavaScript (ja vien tās nav labi izveidotas). Renderēšanas programma var izmantot kadru izlaišanu un citus paņēmienus, lai nodrošinātu pēc iespējas vienmērīgāku veiktspēju.
Ļaujot pārlūkprogrammai kontrolēt animācijas secību, pārlūkprogramma var optimizēt veiktspēju un efektivitāti, piemēram, samazinot to animāciju atjaunināšanas biežumu, kas darbojas cilnēs, kuras pašlaik nav redzamas.

Animācijas konfigurēšana

Lai izveidotu CSS animācijas secību, veidojiet animējamā elementa stilu, izmantojot animācijas rekvizītu vai tā apakšrekvizītus. Tas ļauj konfigurēt laiku, ilgumu un citu informāciju par to, kā animācijas secībai vajadzētu virzīties uz priekšu. Tas dara nē konfigurējiet animācijas faktisko izskatu, kas tiek darīts, izmantojot @keyframes at-noteikumu, kā aprakstīts tālāk.

animācijas nosaukums Norāda @keyframes at-noteikuma nosaukumu, kas apraksta animācijas atslēgkadrus. animation-duration Konfigurē laiku, kas nepieciešams animācijai, lai pabeigtu vienu ciklu. animation-timing-function Konfigurē animācijas laiku; tas ir, kā animācija pāriet caur atslēgas kadriem, izveidojot paātrinājuma līknes. animation-delay Konfigurē aizkavi starp elementa ielādes laiku un animācijas secības sākumu. animation-itration-count Konfigurē animācijas atkārtošanās reižu skaitu; jūs varat norādīt bezgalīgi, lai atkārtotu animāciju bezgalīgi. animation-direction Konfigurē, vai animācijai ir jāmaina virziens katrā secībā, vai jāatjauno sākuma punkts un jāatkārtojas. animation-fill-mode Konfigurē, kādas vērtības tiek lietotas animācijai pirms un pēc tās izpildes. animation-play-state Ļauj apturēt un atsākt animācijas secību.

Animācijas secības noteikšana, izmantojot atslēgas kadrus

Kad esat konfigurējis animācijas laiku, jums ir jādefinē animācijas izskats. Tas tiek darīts, izveidojot divus vai vairākus atslēgkadrus, izmantojot kārtulu @keyframes. Katrs atslēgas kadrs apraksta, kā animētais elements ir jāatveido noteiktā laikā animācijas secības laikā.

Tā kā animācijas laiks ir definēts CSS stilā, kas konfigurē animāciju, atslēgas kadri izmanto CSS datu tipu, kas ir procentuālā vērtība. To bieži izmanto, lai definētu izmēru attiecībā pret elementa vecāku objektu. Daudzos rekvizītos var izmantot procentus, piemēram, platuma augstuma piemales polsterējumu un fonta lielumu.> lai norādītu laiku animācijas secības laikā, kurā tās notiek. 0% norāda animācijas secības pirmo brīdi, bet 100% norāda animācijas beigu stāvokli. Tā kā šie divi laiki ir tik svarīgi, tiem ir īpaši aizstājvārdi: no un līdz. Abi nav obligāti. Ja no / 0% vai līdz / 100% nav norādīts, pārlūkprogramma sāk vai pabeidz animāciju, izmantojot visu atribūtu aprēķinātās vērtības.

Pēc izvēles varat iekļaut papildu atslēgas kadrus, kas apraksta starpposmus starp animācijas sākumu un beigām.

Piemēri

Piezīme: Dažām vecākām pārlūkprogrammām (pirms 2017. gada) var būt nepieciešami prefiksi; reāllaika piemēri, uz kuriem varat noklikšķināt, lai skatītu savā pārlūkprogrammā, ietver sintakse ar prefiksu -webkit.

Teksta slīdēšana pa pārlūkprogrammas logu

Un pārējā koda daļa:

@keyframes slidein ( no ( piemale-kreisais: 100%; platums: 300%; ) līdz (mala-kreisais: 0%; platums: 100%; ) )

Kāpurs un Alise kādu laiku klusēdami saskatījās: beidzot Kāpurs izņēma ūdenspīpi no mutes un uzrunāja viņu gurdenā, miegainā balsī.

Izmantojot animācijas saīsinājumu

Animācijas saīsinājums ir noderīgs vietas taupīšanai. Piemēram, noteikums, ko esam izmantojuši šajā rakstā:

P ( animācijas ilgums: 3 s; animācijas nosaukums: slidein; animācijas atkārtojumu skaits: bezgalīgs; animācijas virziens: alternatīvs; )

Varētu aizstāt ar

P (animācija: 3 s bezgalīgs alternatīvs slaids;)

Vairāku animācijas rekvizītu vērtību iestatīšana

CSS animācijas garās vērtības var pieņemt vairākas vērtības, atdalītas ar komatiem — šo līdzekli var izmantot, ja vēlaties vienā kārtulā lietot vairākas animācijas un iestatīt atsevišķus ilgumus, atkārtojumu skaitu utt. dažādām animācijām. Apskatīsim dažus ātrus piemērus, lai izskaidrotu dažādas permutācijas:

Šajā pirmajā piemērā mums ir iestatīti trīs animācijas nosaukumi, bet tikai viens ilgums un atkārtojumu skaits. Šajā gadījumā visām trim animācijām tiek piešķirts vienāds ilgums un atkārtojumu skaits:

Animācijas nosaukums: fadeInOut, moveLeft300px, bounce; animācijas ilgums: 3s; animācijas atkārtojumu skaits: 1;

Šajā otrajā piemērā visiem trim rekvizītiem ir iestatītas trīs vērtības. Šajā gadījumā katra animācija tiek izpildīta ar attiecīgajām vērtībām vienā un tajā pašā pozīcijā katrā rekvizītā, tāpēc, piemēram, fadeInOut ilgums ir 2,5 s un iterāciju skaits ir 2 utt.

Animācijas nosaukums: fadeInOut, moveLeft300px, bounce; animācijas ilgums: 2,5 s, 5 s, 1 s; animācijas atkārtojumu skaits: 2, 1, 5;

Šajā trešajā gadījumā ir norādītas trīs animācijas, bet tikai divi ilgumi un atkārtojumi. Šādos gadījumos, kad nav pietiekami daudz vērtību, lai katrai animācijai piešķirtu atsevišķu vērtību, vērtības tiek ciklētas no sākuma līdz beigām. Piemēram, fadeInOut ilgums ir 2,5 s, bet moveLeft300px — 5 s. Tagad esam sasnieguši pieejamo ilguma vērtību beigas, tāpēc sākam vēlreiz no sākuma — tādējādi atlēciena ilgums ir 2,5 s. Iterācijas skaits (un visas citas jūsu norādītās rekvizītu vērtības) tiks piešķirtas tādā pašā veidā.

Animācijas nosaukums: fadeInOut, moveLeft300px, bounce; animācijas ilgums: 2,5s, 5s; animācijas atkārtojumu skaits: 2, 1;

Animācijas pasākumu izmantošana

Izmantojot animācijas pasākumus, varat iegūt papildu kontroli pār animācijām, kā arī noderīgu informāciju par tām. Šos notikumus, ko attēlo AnimationEvent objekts, var izmantot, lai noteiktu, kad animācijas sākas, beidzas un sāk jaunu iterāciju. Katrs notikums ietver laiku, kad tas notika, kā arī tās animācijas nosaukumu, kas aktivizēja notikumu.

Mēs pārveidosim slīdošā teksta piemēru, lai izvadītu informāciju par katru animācijas notikumu, kad tas notiek, lai mēs varētu apskatīt to darbību.

CSS pievienošana

Mēs sākam ar CSS izveidi animācijai. Šī animācija ilgs 3 sekundes, tā tiks saukta par “slidein”, atkārtojas 3 reizes un katru reizi mainīs virzienu. Elementā @keyframes tiek manipulēts ar platumu un kreiso malu, lai elements slīdētu pa ekrānu.

Slidein ( animācijas ilgums: 3 s; animācijas nosaukums: slidein; animācijas iterācijas skaits: 3; animācijas virziens: alternatīvs; ) @keyframes slaids ( no ( margin-left: 100%; platums: 300% ) līdz ( piemale -kreisais:0%; platums:100%; ) )

Animācijas notikumu klausītāju pievienošana

Mēs izmantosim JavaScript kodu, lai noklausītos visus trīs iespējamos animācijas notikumus. Šis kods konfigurē mūsu notikumu klausītājus; mēs to saucam, kad dokuments pirmo reizi tiek ielādēts, lai iestatītu lietas.

Var elements = document.getElementById("watchme"); element.addEventListener("animācijas sākums", klausītājs, false); element.addEventListener("animationend", klausītājs, false); element.addEventListener("animācija", klausītājs, false); element.className = "slidein";

Šis ir diezgan standarta kods; sīkāku informāciju par to, kā tas darbojas, varat iegūt eventTarget.addEventListener() dokumentācijā. Pēdējā lieta, ko šis kods dara, ir iestatīt klasi elementam, kuru mēs animēsim, uz “slidein”; mēs to darām, lai sāktu animāciju.

Kāpēc? Jo animācijas sākuma notikums tiek aktivizēts, tiklīdz tiek sākta animācija, un mūsu gadījumā tas notiek pirms mūsu koda palaišanas. Tāpēc mēs paši sāksim animāciju, iestatot elementa klasi uz stilu, kas pēc fakta tiek animēts.

Notikumu uztveršana

Notikumi tiek piegādāti klausītāja() funkcijai, kas ir parādīta zemāk.

Funkcijas klausītājs(notikums) ( var l = document.createElement("li"); switch(event.type) ( case "animationsstart": l.innerHTML = "Sākts: pagājušais laiks ir " + event.elapsedTime; break; case " animationend": l.innerHTML = "Beigusies: pagājušais laiks ir " + event.elapsedTime; pārtraukums; case "animationiteration": l.innerHTML = "Jauna cilpa sākās laikā " + event.elapsedTime; break; ) document.getElementById(" izvade").appendChild(l); )

Arī šis kods ir ļoti vienkāršs. Tas vienkārši aplūko notikumu.type, lai noteiktu, kāda veida animācijas notikums noticis, un pēc tam pievieno atbilstošu piezīmi elementam, kas apzīmē nesakārtotu vienumu sarakstu, kas parasti tiek renderēts kā saraksts ar aizzīmēm.">

Izvade, kad viss ir pateikts un izdarīts, izskatās apmēram šādi:

Sākts: pagājušais laiks ir 0
Jauna cilpa sākās 3.01200008392334
Jauna cilpa sākās laikā 6.00600004196167
Beigusies: pagājušais laiks ir 9.234000205993652

Ņemiet vērā, ka laiki ir ļoti tuvu, bet ne precīzi, tiem, kas bija paredzēti, ņemot vērā animācijas konfigurēšanas laikā noteikto laiku. Ņemiet vērā arī to, ka pēc animācijas pēdējās atkārtojuma animācijas atkārtošanas notikums netiek nosūtīts. tā vietā tiek nosūtīts animācijas beigu pasākums.

HTML

Pilnības labad šeit ir HTML, kas parāda lapas saturu, tostarp sarakstu, kurā skripts ievieto informāciju par saņemtajiem notikumiem:

Skaties, kā kustos

Šajā piemērā parādīts, kā izveidot CSS animācijas H1 elementi pārvietojas pa lapu.

Turklāt mēs izvadām tekstu katru reizi, kad tiek aktivizēts animācijas notikums, lai jūs varētu redzēt to darbībā.

Un šeit ir tiešraide.

Piezīme: atkārtoti ielādējiet lapu, lai redzētu animāciju, vai noklikšķiniet uz CodePen pogas, lai skatītu animāciju CodePen vidē.

Jo tuvāk saskaramies sāk darboties, jo saprotamāks tas kļūst lietotājam. Dzīvē gandrīz nekas nenotiek uzreiz - atverot sodas kannu vai aizverot acis pirms gulētiešanas, mēs novērojam virkni starpstāvokļu, nevis asu “atvērts/aizvērts”, kā tas notiek tīmeklī.

Savā rakstā es dalīšos savās zināšanās par CSS animāciju un kā ar to strādāt. Animācija piešķir vietnēm dinamismu un uzlabo izpratni par to iespējām. Tas atdzīvina tīmekļa lapas un palīdz lietotājam mijiedarboties. Atšķirībā no CSS3 pārejām, CSS animācijas ir balstītas uz atslēgas kadriem. Kas ļauj atskaņot un atkārtot efektus noteiktu laiku, kā arī automātiski apturēt animāciju cilpas ietvaros.

Animācija ir atslēgkadru vai atslēgkadru kopa, kas tiek glabāta CSS:

@keyframes animācijas tests ( 0% ( platums: 100 pikseļi; ) 100% ( platums: 200 pikseļi; ) )

Paskatīsimies, kas šeit notiek. Atslēgvārds @keyframes apzīmē pašu animāciju. Tad nāk animācijas nosaukums, mūsu gadījumā animācijas tests. Cirtainajās lencēs ir ietverts atslēgu kadru saraksts. Mēs izmantojam sākuma kadru 0% un beigu rāmi 100% (tos var rakstīt arī kā no un līdz).
Apskatiet tālāk norādīto kodu. Animāciju var iestatīt arī šādi:

@keyframes animācijas tests ( no ( platums: 0; ) 25% ( platums: 75 pikseļi; ) 75% ( platums: 150 pikseļi; ) līdz ( platums: 100%; ) )

Atcerieties: ja sākuma vai beigu kadrs nav norādīts, pārlūkprogramma tos automātiski noteiks tā, it kā tiem nebūtu piemērota animācija.

Animāciju var savienot ar šādu elementu:

Elementu atlasītājs ( animācijas nosaukums: jūsu animācijas nosaukums; animācijas ilgums: 2,5 s; )

Rekvizīts animācijas nosaukums norāda @keyframes animācijas nosaukumu. Animācijas ilguma kārtula norāda animācijas ilgumu sekundēs (1 s, 30 s, 0,5 s) vai milisekundēs (600 ms, 2500 ms).

Varat arī grupēt atslēgkadrus:

@keyframes animācijas tests ( 0%, 35% ( platums: 50 pikseļi; ) 75% ( platums: 200 pikseļi; ) 100% ( platums: 100%; ) )

Vienam elementam (selektoram) var lietot vairākas animācijas. To nosaukumi un parametri jāraksta lietošanas secībā:

Elementu atlasītājs ( animācijas nosaukums: animācijas nosaukums-1, animācijas nosaukums-2; animācijas ilgums: 1 s, 3 s; )

Animācijas aizkave:

Animācijas aizkaves rekvizīts norāda aizkavi pirms animācijas atskaņošanas sekundēs vai milisekundēs:

Elementu atlasītājs ( animācijas nosaukums: animācijas nosaukums-1; animācijas ilgums: 3 s; animācijas aizkave: 2 s; /* paies 2 sekundes pirms animācijas sākuma */ )

Atkārtot animāciju:

Izmantojot animācijas iterāciju skaitu, mēs varam norādīt, cik reižu animācija atkārtosies: 0, 1, 2, 3 utt. Vai bezgalīgs cilpai:

Elementu atlasītājs ( animācijas nosaukums: animācijas nosaukums-1; animācijas ilgums: 3 s; animācijas aizkave: 4 s; animācijas atkārtojumu skaits: 5; /* animācija tiek atskaņota 5 reizes */ )

Elementa stāvoklis pirms un pēc animācijas:

Izmantojot rekvizītu animation-fill-mode, ir iespējams norādīt, kādā stāvoklī elements būs pirms animācijas sākuma un pēc tās beigām:

animācijas aizpildīšanas režīms: uz priekšu;- animācijas elements būs pēdējā atslēgas kadra stāvoklī pēc pabeigšanas/atskaņošanas;

a nimation-fill-mode: atpakaļgaitā;- elements būs pirmā atslēgas kadra stāvoklī;

animācijas aizpildīšanas režīms: abi; - pirms animācijas sākuma elements būs pirmā atslēgas kadra stāvoklī, pēc pabeigšanas - pēdējā.

Sākt un apturēt animāciju:

Par to atbild animācijas atskaņošanas stāvokļa rekvizīts, kam var būt divas vērtības: darbojas vai apturēta.

Elementu atlasītājs: virzīt kursoru ( animācijas atskaņošanas stāvoklis: apturēts; )

Animācijas virziens:

Rekvizīts animācijas virziens norāda, kā kontrolēt animācijas atskaņošanas virzienu. Šeit ir norādītas iespējamās vērtības:

animācijas virziens: normāls; - animācija tiek atskaņota tiešā secībā;

animācijas virziens: reverss; - animācija tiek atskaņota apgrieztā secībā, no līdz no;

animācijas virziens: alternatīvs;- pāra animācijas atkārtojumi tiek atskaņoti apgrieztā secībā, nepāra - uz priekšu;

animācijas virziens: alternate-reverse; - nepāra animācijas atkārtojumi tiek atskaņoti apgrieztā secībā, pāra - uz priekšu.

Animētu kadru vienmērīgas izvades funkcija:

Animācijas laika funkcijas rekvizīts ļauj iestatīt īpašu funkciju, kas ir atbildīga par animācijas atskaņošanas ātrumu. Pēc noklusējuma animācija sākas lēni, ātri paātrina un palēninās beigās. Pašlaik mums ir šādas iepriekš definētas vērtības: lineārs, vieglums, atvieglojums-in, atvieglojums-out, vieglums-in-out, solis-sākt, soli-beigas.

Tomēr šādas funkcijas varat izveidot pats. Nozīme animācijas laika funkcija: kubiskais bezizeris (P1x, P1y, P2x, P2y); izmanto 4 argumentus kā ievadi un izveido izplatīšanas līkni animācijas procesam.

Sīkāk var izpētīt vai izmēģināt šo funkciju izveidi mājaslapā http://cubic-bezier.com

Visbeidzot, animāciju var sadalīt atsevišķu vērtību (soļu) komplektā, izmantojot soļu funkciju, kas kā ievadi izmanto soļu skaitu un virzienu (sākums vai beigas). Tālāk esošajā piemērā animācija sastāv no 5 soļiem, no kuriem pēdējais notiks tieši pirms animācijas beigām:

Elementu atlasītājs ( animācijas nosaukums: animācijas nosaukums-1; animācijas ilgums: 3 s; animācijas aizkave: 5 s; animācijas atkārtojuma skaits: 3; animācijas laika funkcija: soļi (5, beigas); )

Pārlūka atbalsts animācijai:

Vērtības tabulā norāda pirmo pārlūkprogrammas versiju, kas pilnībā atbalsta īpašumu.

Vērtības ar -webkit-, -moz- vai -O- norāda pirmo versiju, kas darbojās ar prefiksu.

Vietnē https://www.w3schools.com Sīkāk (ar piemēriem) varat izpētīt CSS animāciju.
Viena no populārākajām bibliotēkām darbam ar animācijām ir animēt.css.

Var šķist, ka grūtības, ar kurām saskaraties, strādājot ar CSS animācijām, nav pamatotas. Bet tā absolūti nav taisnība.

Pirmkārt, CSS ir spēcīgs rīks, lai uzlabotu saskarnes lietotāja pieredzi. Tas būtiski neietekmē lietotāja produktivitāti. Atšķirībā no JavaScript analogiem. Šī tehnoloģija, izmantojot GPU skaitļošanas jaudu, ļauj pārlūkprogrammām ātri optimizēt renderēšanas elementu ātrumu.

Otrkārt, CSS animāciju ieviešanas elastība, ātrums un vienkāršība palīdzēs “ieelpot” esošajās vai jaunās saskarnēs. Izstrādājot vispārīgas un oriģinālas pieejas un izprotot tehnoloģijas specifiku, jūs varat izveidot unikālas lietojamības saskarnes gandrīz visiem projektiem.

Ceru, ka rakstā atradāt sev noderīgu informāciju. Skaistas vietnes visiem. Neaizmirsti par animācijām :)

Populārs kategorijā: