✅ HTML5 - animācijas

Satura rādītājs

Animācijas ir efekti, piemēram, pārejas, bet to funkcionalitāte ir uzlabota tādā nozīmē, ka ir augstāka kontrole pār to, ko var darīt, jo ir pieejamas vairāk iespēju veikt izmaiņas no viena stila uz citu.
Animācijas īpašības
Kā mēs jau teicām iepriekš, animācijas ir uzlabotas pārejas, jo ir daudz iespēju un īpašību, kas ļauj mums labāk kontrolēt tās, mēs pārskatīsim katru no tām:

animācijas aizkave: Lietojiet noteiktu laiku, lai varētu sākt animāciju pēc tās aktivizēšanas.
animācijas virziens: Norāda, vai animācija jāspēlē atpakaļ vai mainīgos ciklos.
animācijas ilgums: Norāda laika diapazonu, kurā animācija jāspēlē.
animācijas atkārtojumu skaits: Norāda, cik reizes animācija ir jāatkārto, un var pat novietot vērtību bezgalīgs bezgalīgiem tā paša atkārtojumiem.
animācijas nosaukums: Norāda animācijas nosaukumu.
animācijas atskaņošanas stāvoklis: Ļauj apturēt animācijas darbību un pēc tam turpināt atskaņošanu.
animācijas laika noteikšanas funkcija: Norādiet, kā animācijā jāizturas pret starpvērtībām
animācija: Tas ir īsceļš, ar kuru mēs varam iekļaut visus animācijas rekvizītus vienā CSS deklarācijā, un tam ir šāda struktūra:

animācija:
Tagad, kad mēs zinām pieejamos rekvizītus, aplūkosim koda piemēru, lai to analizētu:

Piemērs

Ir daudz dažādu augļu veidu - vien ir vairāk nekā 500 banānu šķirņu. Kad mēs pievienojam neskaitāmus ābolu, apelsīnu un citu plaši pazīstamu augļu veidus, mēs esam tūkstošiem izvēles priekšā.

Šajā piemērā mēs to redzam darīšanas laikā : virziet kursoru uz elementa mums būs kavēšanās 100 ms, tad animācijai būs jāveic 500 ms, un tā tiks atkārtota bezgalīgi daudzas reizes.
Tad mēs redzam, ka ar nosaukumu, ko devām lietojumprogrammai, mēs izmantosim īpašumu @atslēgas rāmji kur mēs jums pateiksim, kuri elementi tiks animēti.
Apskatīsim, kā tam vajadzētu izskatīties mūsu pārlūkprogrammā:

PALIELINĀT

Kā redzam, elementa fonā ir izmaiņas, tad burta krāsa un fonta lielums, animācijas beigās tas atgriežas sākotnējā stāvoklī, un viss šis process tiek atkārtots vēlreiz, tādējādi iegūstot kustība, kas nepastāv, izmantojot pārejas.
Ar to mēs arī demonstrējam animācijas nosaukuma nozīmi, jo tas darbojas kā identifikators, lai to varētu piešķirt a @atslēgas rāmji.
Ar to mēs pabeidzam apmācību un ar to mēs jau varam veikt pamata animācijas, lai nodrošinātu lielāku kustību mūsu dokumentos HTML.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu