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 skaitļošanas jauda GPU ļauj pārlūkprogrammām ātri optimizēt elementu renderēšanas ā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.

Es ceru, ka jūs atradāt rakstā noderīga informācija priekš manis. Skaistas vietnes visiem. Neaizmirsti par animācijām :)

UZMANĪBU! Tā kā šajā nodarbībā mēs analizēsim animāciju, es nevarēšu jums parādīt tās darbības piemēru attēlos, tāpēc droši atveriet koda redaktoru un ierakstiet tur šajā rakstā norādīto kodu.

Radīšanas pamati

Tātad, pirmkārt, jums jāsāk ar to, kā to izveidot. Jūs, iespējams, esat pieradis pie tā, ka jebkura lieta CSS tiek ieviesta, vēlamajam atlasītājam piešķirot nepieciešamos rekvizītus ar atbilstošām vērtībām. Tātad, veidojot animāciju, ar to nepietiek. Diagramma izskatās šādi:

Paši pārejas efekti tiek izveidoti, izmantojot @keyframes

Nepieciešamajam elementam tiek dota šī pati animācija, kā arī tās parametri (tas viss, izmantojot rekvizītus un to vērtības).

Tātad, vispirms mums jāapraksta nepieciešamās izmaiņas @keyframes, apskatīsim tuvāk, kā ar tām strādāt.

@keyframes sintakse

Patiesībā man būs vieglāk jums visu izskaidrot, izmantojot gatavu piemēru, kaut arī ļoti vienkāršu. Šeit tas ir (kods ir pievienots css failam):

@keyframes impulss( 0% (fonta izmērs: 50 pikseļi;) 50% (fonta izmērs: 60 pikseļi;)) 100% (fonta izmērs: 50 pikseļi;))

Tātad aiz @keyframes atslēgvārda ir patvaļīgs vārds, kas darbosies kā animācijas nosaukums. Mūsu gadījumā tas ir “pulss”. Pēc tam atveriet cirtaini breketes, kurās ir ierakstīti nepieciešamie noteikumi.

Procenti ir tā sauktie laikspiedoli, pēc kuriem elementam tiks pievienoti norādītie rekvizīti. Mūsu gadījumā rakstītais nozīmē sekojošo: pašā izpildes sākumā fonta lielums būs 50 pikseļi, vidū tas palielināsies līdz 60 un beigās atkal samazināsies līdz sākotnējam izmēram.

Atslēgvārdi no un līdz var aizstāt procentuālo ierakstu; tie norāda attiecīgi 0% un 100%, tas ir, atskaņošanas sākumu un beigas.

Animācijas ieviešana darbībā

Pagaidām mums ir tikai kods, kas ģenerē animācijas efektu, taču tas nekur netiek izmantots. Ja atsvaidzināsiet savu tīmekļa lapu, nekas nemainīsies. Attiecīgi, lai lietotu animāciju, jums jāveic divas darbības:

Atlasiet elementu, kuram tas tiks piemērots

Saistiet to ar noteikumiem, kas aprakstīti, izmantojot @keyframes (izmantojot nosaukumu), un arī iestatiet papildu iestatījumi ja nepieciešams.

Pamēģināsim

Savā html failā es izveidoju bloku ar ēnu klasi, kurā ir vienkārša teksta rindiņa. Mūsu mērķis ir izmantot iepriekš aprakstītos animācijas efektus teksta elements.

Lai viss darbotos, šajā gadījumā ir jānorāda divi nepieciešamie rekvizīti. Pirmkārt, šis ir nosaukums, ko mēs ierakstījām atslēgas kadros. Otrkārt, tas ir animācijas ilgums, jo bez šī parametra pārlūkprogramma to vienkārši nevarēs atskaņot.

Tātad, papildus stiliem, kas jau ir mūsu blokā, mēs pievienojam jaunus:

animācijas nosaukums: pulss; animācijas ilgums: 2s;

Tādējādi viss tiks atkārtots 4 reizes un pēc tam apstāsies. Kā jūs saprotat, četru vietā varat ievadīt jebkuru skaitli.

Bezgalīgas animācijas programmā css3

Ļoti viegli ieviests, izmantojot šo pašu īpašumu. Patiesībā jūs varat vienkārši iestatīt atkārtojumu skaitu uz pāris tūkstošiem, ar to pietiks, taču teorētiski mūsu animācija neatkārtosies bezgalīgi.

animācijas atkārtojumu skaits: bezgalīgs;

Tas ir viss, tagad mēs esam veikuši bezgalīgu atkārtojumu. Es neiesaku pārbaudīt, vai tā ir taisnība, visu mūžu sēdējot aiz monitora. To vienkārši izmanto gadījumos, kad vēlaties, lai efekts nepārtraukti atkārtojas un nepazustu. Ja tas ir neuzkrītošs un nenovērš lietotāja uzmanību, tad kāpēc gan ne.

Kavēšanās pirms starta

Pēc noklusējuma atskaņošana sākas pēc tam, kad lapa ir pilnībā ielādēta. Šo darbību var kontrolēt, izmantojot rekvizītu animācijas aizkave. Tās vērtība tiek norādīta sekundēs.

Virziens

Vēl viens interesants īpašums ir animācijas virziens. Pēc noklusējuma tas ir iestatīts uz parasto; ja iestatāt to uz apgrieztu, tad visi aprakstītie kadri tiks izpildīti pretējā virzienā. Pārbaudīsim, kāda ir atšķirība. Lai to izdarītu, es nedaudz mainīju efektu, pievienojot vēl vienu rāmi.

@keyframes impulss( 0% (fonta izmērs: 50 pikseļi;) 50% (fonta izmērs: 60 pikseļi;) 70% (fonta izmērs: 80 pikseļi;) 100% (fonta izmērs: 50 pikseļi;))

Tātad ar parastu virzienu animācijas pirmajā pusē fonta lielums palielināsies līdz 60 pikseļiem, pēc tam atkal strauji palielināsies līdz 80, pēc tam atgriezīsies sākotnējā pozīcijā.

Rīsi. 2. Oriģinālā teksta izmērs

Rīsi. 3. Fonta lielums ir gandrīz animācijas beigās, pirms tas pēkšņi atgriežas sākotnējā stāvoklī.

Tagad mēs jautājam:

animācijas virziens: reverss;

Viss apgriezās kājām gaisā. Pirmkārt, teksts palielināsies pat par 30 pikseļiem, līdz pat 80, un pārējā animācijas daļā tas pakāpeniski samazināsies, galu galā atgriežoties iepriekšējā izmērā. Tas ir vienkārši.

Animācijas forma

Un tas, iespējams, ir viens no interesantākajiem iestatījumiem, ar kuru jūs varat eksperimentēt ilgu laiku. Pēc noklusējuma visas izmaiņas tiek veiktas ar tādu pašu ātrumu. Šo animācijas veidu sauc par lineāru, un bez tā ir arī citas.

Sveicieni, draugi! Šodien mēs apskatīsim ļoti interesantu tēmu - CSS animāciju veidošanu, izmantojot reālu piemēru. Šīs apmācības kulminācija būs skaistas CSS animācijas izveide ar miljona dolāru logotipu.

Forši

Stammer

Nodarbību materiāli

• Avoti: Lejupielādēt
• Pamatpiemērs no nodarbības: https://codepen.io/agragregra/pen/PKNavm
• Sākuma veidne no nodarbības: https://github.com/agragregra/optimizedhtml-start-template

Nedaudz teorijas

Pirms sākat veidot animētu piemēru, jums vajadzētu iepazīties ar pamatiem CSS animācijas, apsveriet pamatnosacījumus, īpašības un noteikumus CSS izveide animācijas.

Ja jums jau ir bijusi pieredze animāciju veidošanā jebkurā lietojumprogrammā, piemēram, Adobe After Effects vai vecajā Flash Professional (tagad Adobe Animate), tad jums ir jāzina tādi jēdzieni kā “Atslēgkadri”, “Pagaidu funkcijas vai kustības dinamika”, kas, tāpat kā jebkurā citā animācijas jomā, attiecas uz elementu animāciju lapā, izmantojot CSS. Tomēr atšķirībā no darba ar lietojumprogrammu saskarnēm jūs veidojat CSS animācijas, ierakstot kodu redaktorā.

CSS kārtula @keyframes

CSS animācijas izveide sākas ar animācijas nosaukuma deklarēšanu blokā @keyframes un definējot tā sauktos animācijas soļus vai atslēgu kadrus.

Lai pārskatītu teoriju un pamatus, mēs izmantosim tīru CSS, un vēlāk, izmantojot sarežģītāku piemēru, izmantosim Sass priekšapstrādātāju. Vairāk par Sasu varat uzzināt nodarbībā. Turklāt, lai dziļāk izprastu CSS pamatus, iesaku izlasīt arī nodarbības “CSS pamati – ceļvedis mazajiem” un “Visi CSS atlasītāji vienā nodarbībā”

Apskatīsim @keyframes struktūru un darbu ar ieslēgtiem atslēgas kadriem vienkāršs piemērs:

@keyframes pagriešana ( 0% ( apmales rādiuss: 0 0 0 0; pārveidošana: pagriezt (0°); ) 25% ( apmales rādiuss: 50% 0 0 0; transformācija: pagriezt (45°); ) 50% ( apmale- rādiuss: 50% 50% 0 0; pārveidot: pagriezt (90 grādi); ) 75% (apmales rādiuss: 50% 50% 50% 0; pārveidot: pagriezt (135 grādi); ) 100% (apmales rādiuss: 50% 50 % 50% 50%; pārveidot: pagriezt (180°); ) )

Pirmajā rindā mēs to redzam pēc atslēgvārds@keyframes tā nosaukums ir “griežas”. Šis ir kadru kadru bloka nosaukums, uz kuru mēs atsauksimies tālāk.

Pēc deklarācijas atveras cirtaini breketes (in šajā piemērā ieslēgts tīrs CSS), kurā rekvizīti tiek rakstīti secīgi no 0% līdz 100% katram atslēgas kadram. Lūdzu, ņemiet vērā, ka no 0% līdz 100% varat ievietot tik daudz starpvērtību, cik vēlaties, neatkarīgi no tā, vai tas ir 50%, 75% vai pat 83%. Tas ir ļoti līdzīgs animācijas lietojumprogrammas laika skalai, kurā varat pievienot jebkuru starpstāvokli starp diviem stāvokļiem.

Turklāt šo koda bloku ar atslēgas kadriem var pielietot jebkuram CSS selektoram, taču visbiežāk tie ir sagatavoti konkrētam selektoram, ja vēlamies panākt noteiktu uzvedību no vēlamā bloka.

Piekļuve atslēgu rāmju blokam

Pēc tam, kad esam iestatījuši objekta atslēgu rāmjus (reālajā dzīvē tas tiek darīts paralēli vai pat pēc piekļuves blokam ar atslēgu rāmjiem), mēs varam piekļūt mūsu jaunizveidotajam blokam. Apskatīsim šādu vienkāršo kodu no iepriekš minētā piemēra:

Div (platums: 120 pikseļi; augstums: 120 pikseļi; fona krāsa: violeta; mala: 100 pikseļi; animācija: pagriežot 2 s atvieglojumu 1 s bezgalīgu alternatīvu; )

Līdz pēdējai rindai nekas īpašs. Šeit mēs nosakām, kā objekts sākotnēji izskatīsies, un bloka pēdējā rindā mēs atsaucamies uz atslēgu kadru bloku, ko sauc par "pagriešanu":

Animācija: pagrieziena 2s atvieglojums-out 1s bezgalīgs alternate;

Ja ar atslēgu rāmju definīciju viss ir samērā skaidrs, tad šai rindai ir nepieciešams tūlītējs skaidrojums. Kā redzam, pirmais nāk CSS īpašums"animācija". Šī ir saīsināta forma, piemēram, rekvizīts “margin: 20px 30px 40px 50px”, ko var iedalīt vairākos atsevišķos rekvizītos:

Pēc šīs analoģijas salikto rekvizītu “animācija” var iedalīt vairākos atsevišķos rekvizītos:

Visbiežāk pieredzējuši izstrādātāji neraksta visas šīs īpašības atsevišķi, bet izmanto īsu apzīmējumu, un tā struktūra ir šāda:

animācija: (1. animācijas nosaukums - nosaukums) (2. animācijas ilgums - ilgums) (3. animācijas-laika-funkcijas kustības dinamika) (4. animācijas aizkave - pauze pirms sākuma) (5. animācija-iterācija- skaits - izpildes skaits) (6. animācijas virziens - virziens)

Animācija: animācijas nosaukums 2s lineārs 1s bezgalīgs reverss

No piemēra redzam, ka piekļūstam @keyframes animācijas nosaukuma blokam, iestatām animācijas ilgumu uz 2 sekundēm, dinamika ir lineāra, pauze pirms palaišanas ir 1 sekunde, animācija tiek atkārtota bezgalīgi un tiek izpildīta pretējā virzienā.

Kā jau teicu iepriekš, īsais apzīmējums sākas ar īpašumu " animācija", kam seko vērtības, kuru secību labāk neaizmirst, lai nerastos neskaidrības rakstot CSS animāciju.

Tomēr lielāko daļu šo rekvizītu var izlaist, jo visbiežāk to noklusējuma vērtības pilnībā apmierinās lielāko daļu animācijas izveides uzdevumu. Daži no tiem var nebūt rakstīti, bet pārējie ir jānorāda secībā, par kuru mēs runājām iepriekš. Kopumā, lai jūsu animācija darbotos, jums ir nepieciešami tikai divi parametri jūsu saliktajā īpašumā — nosaukums ( animācijas nosaukums) un ilgums ( animācijas ilgums).

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 kadri, par tiem 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 gan apraksta valodu izskats dokumentu. 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