CSS ir viens no spēcīgākajiem veidiem, kā padarīt vietni interaktīvu. Tas pārveido mūsu pamata izskatu un izjūtu vietne. Viena no svarīgākajām un aizraujošākajām CSS piedāvātajām funkcijām ir tā, ka tā ļauj mums veikt animācijas. Tas ļauj mums pārvietot elementus mūsu lapā. Sāksim animācijas ceļojumu CSS šādā secībā:
Animācijas CSS
Animāciju pievienošana mūsu vietnei ir lielisks veids, kā piesaistīt lietotāju uzmanību. Tas ne tikai palielina mūsu lapas vērtību, bet arī bagātina lietotāju pieredzi. CSS animācija ir veidota uz divām daļām. Viņi ir
- Atslēgu rāmji
- Animācija
CSS animācijas tiek atbalstītas visās pārlūkprogrammās. Tomēr dažām vecākām pārlūkprogrammām, piemēram, Safari (līdz 8.0. Versijai), animācijas īpašību interpretēšanai nepieciešams prefikss (-webkit-). Piemēram:
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% -webkit-animation-name: cssanim / * vecās pārlūkprogrammas * / -webkit-animation-duration: 5s / * vecās pārlūkprogrammas * / animation -name: cssanim animācijas ilgums: 5s} / * vecās pārlūkprogrammas * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {pa kreisi: 300 pikseļi}}Mēs varam izmantot HTML lapas paraugu no augšas un stila tagā aizstāt CSS kodu, lai izmēģinātu citus piemērus.
Atslēgkadri CSS
Šis ir CSS animācijas elements. Tas mēdza definēt konkrētus animācijas mirkļus un stilus mūsu tīmekļa vietnē. Citiem vārdiem sakot, kad mēs CSS iekšpusē norādām @keyframes, tā iegūst kontroli, lai modificētu pašreizējo stāvokli uz jaunu stāvokli vai animētu objektus uz noteiktu laiku.
@Keyframes jābūt noteiktiem rekvizītiem, lai kontrolētu animāciju, piemēram, animācijas nosaukumu, posmus un rekvizītus.
Nosaukums - Katrai animācijai ir jābūt nosaukumam, lai aprakstītu tās uzvedību.
Posmi - Skatuve ir animācijas pabeigšana. To var izdarīt apzīmējot ar atslēgvārdu “uz” un “no” vai procentos, turpretī 0% apzīmē animācijas sākuma stāvokli un 100% - animācijas beigu stāvokli. Procentuālās attēlojuma izmantošanas priekšrocība ir tā, ka mēs varam definēt vairākus starpposmus starp tiem, t.i., kādai jābūt animācijas uzvedībai 50% posmā vai 75% utt.
Rekvizīti - Šīs īpašības ļauj mums kontrolēt @keyframes, lai ar tiem manipulētu animācijas laikā.
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) necaurredzamība: 0} 50 % {pārveidot: skala (1,5) necaurredzamība: 1} 100% {pārveidot: skala (1)}}Tagad, kad mums ir skaidrs par galveno kadru definēšanu. Ļaujiet mums izpētīt animācijas īpašības, lai aprakstītu, kā animēt mūsu elementus un objektus. Abus rekvizītus, t.i., mantot un iniciēt, var izmantot ar visiem animācijas veidiem. Šīs īpašības parasti tiek izmantotas kopā ar tagu div, lai parādītu atšķirīgu uzvedību.
iniciāļi: Iestata šim īpašumam noklusējuma vērtību.
mantot: Manto šo rekvizītu no tā pamatelementa.
Animācijas rekvizīti
- animācijas nosaukums
Tas norāda animācijas nosaukumu, kuru izmanto @keyframes, lai manipulētu.Iespējamās vērtības ir:
- nosaukums: Tas norāda nosaukumu, kas jāsaista ar animācijas atslēgkadru.
- neviens: Šī ir noklusējuma vērtība, un to var izmantot, lai ignorētu mantotās vai kaskādes animācijas.
Sintakse:
animācijas nosaukums: nosaukums | nav | sākotnējais | mantot
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animācijas ilgums
Tas norāda laiku, kas nepieciešams, lai animācija pabeigtu vienu izpildi. To nosaka sekundēs vai milisekundēs (piemēram, 4 s vai 400 ms). Šī rekvizīta noklusējuma vērtība ir 0s, tādēļ, ja šis rekvizīts nav norādīts, animācija nenotiks.
Sintakse:
animācijas ilgums: laiks
.anim {height: 200px width: 200px background: zila pozīcija: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) necaurredzamība: 0} 50 % {pārveidot: skala (1.4) necaurredzamība: 1} 100% {pārveidot: skala (1)}}- animācijas kavēšanās
Rekvizīts Animation-delay ļauj mums norādīt animācijas kavēšanos. Tas nosaka, kad animācijas secība tiks sākta.
Šī rekvizīta vērtību var paziņot sekundēs (-ēs) vai milisekundēs (ms). Tajā var būt gan pozitīvas, gan negatīvas vērtības. Pozitīva vērtība norāda, ka animācija tiks sākta pēc noteiktā laika beigām un līdz tam tā paliks vienota. No otras puses, negatīva vērtība nekavējoties sāks animāciju no punkta tā, it kā tā jau būtu izpildīta noteiktu laiku.
Sintakse:
animācijas kavēšanās: laiks
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {pa kreisi: 250 pikseļi}}- animācijas atkārtojumu skaits
Šis rekvizīts norāda animācijas secības atskaņošanas reižu skaitu. Šī rekvizīta noklusējuma vērtība ir 1.Iespējamās vērtības ir:
- numuru - apzīmē atkārtojumu skaitu
- bezgalīgs - norāda, ka animācija jāatkārto uz visiem laikiem
Sintakse:
animācijas atkārtojumu skaits: skaits | bezgalīgs
kas ir semafors java
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {pa kreisi: 100 pikseļi}}- animācijas virziens
Tas nosaka animācijas virzienu. Elementa virzienu var iestatīt tā, lai tas spēlētu uz priekšu, atpakaļ vai pārmaiņus.Šī rekvizīta noklusējuma vērtība ir normāla, un tā tiek atiestatīta katrā ciklā.Iespējamās vērtības ir:
normāli - Šī ir noklusējuma darbība, un animācija tiek atskaņota uz priekšu. Pēc katra cikla animācija nonāk sākotnējā stāvoklī un atkal tiek atskaņota uz priekšu
reverss - Animācija tiek atskaņota atpakaļ. Pēc katra cikla animācija nonāk beigu stāvoklī un tiek atskaņota atpakaļ
aizstājējs - Animācijas virziens ir apgriezts, t.i., tas vispirms spēlē uz priekšu un pēc tam atpakaļ katrā ciklā. Katrs nepāra cikls padara animāciju uz priekšu un katrs pāra cikls - atpakaļ.
aizstājējs-reverss - Animācijas virziens tiek mainīts pārmaiņus. Šeit animācija vispirms tiek atskaņota atpakaļ un pēc tam uz priekšu katrā ciklā. Katrs nepāra cikls pārvietojas atpakaļ vai atpakaļ, un katrs pāra cikls padara animāciju uz priekšu.
Sintakse:
animācijas virziens: normāls | reverss |aizstājējs | aizstājējs-reverss
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {pa kreisi: 100 pikseļi}}- animācijas laika noteikšanas funkcija
Šis rekvizīts nosaka ātruma līkni vai animācijas kustības stilu. Tas tiek piešķirts, lai animācijas stils vienmērīgi mainītos no vienas formas uz otru. Ja vērtība nav piešķirta, tā pēc noklusējuma atvieglo.Animācijas laika noteikšanas funkcijas iespējamās vērtības ir šādas:
vieglums - Šī ir īpašuma noklusējuma vērtība. Šeit animācija sākas lēni, pamazām kļūst strauja vidū un pēc tam atkal lēnām beidzas.
lineārs - Animācija saglabā tādu pašu ātrumu visā ciklā, t.i., no sākuma līdz beigām.
vieglums - Animācija sākas lēnām.
vieglums-out - Animācija beidzas lēnām.
vieglums-ārā - Animācija lēnām pārvietojas gan sākuma, gan beigu laikā.
kubiskais bezjē (n, n, n, n) - Šī uzlabotā funkcija ļaus mums izveidot pielāgotu laika noteikšanas funkciju, nosakot savas vērtības. Iespējamā vērtība svārstās no 0 līdz 1.
Sintakse:
animācijas-laika funkcija: lineāra | vieglums | atvieglojums | vieglums | vieglums-ārā-ārā |kubiskais bezjē (n, n, n, n)
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {fons: dzeltens pa kreisi: 200 pikseļi augšpusē: 200 pikseļi} 100% {fons: zils pa kreisi: 100 pikseļi}}- animācijas aizpildīšanas režīms
Tas ir īpašs īpašums, jo tas nosaka animācijas stilu pirms vai pēc animācijas atskaņošanas.Tāpat kā pēc noklusējuma, animācija neietekmē elementa stilu pirms tā sākuma vai pēc tā beigām. Šis rekvizīts ir noderīgs, jo tas palīdz ignorēt šo animācijas noklusējuma darbību.Animācijas aizpildīšanas režīma rekvizīta iespējamās vērtības ir šādas:
neviena - Šī ir rekvizīta noklusējuma vērtība, t.i., animācijas stili netiek izmantoti elementam pirms vai pēc animācijas.
uz priekšu - Stili tiek saglabāti elementā galīgajā animācijas secībā, t.i., pēc animācijas pabeigšanas.
atpakaļ - Stili tiek saglabāti elementā sākotnējā animācijas secībā, t.i., pirms animācija tiek skatīta, īpaši animācijas kavēšanās laikā.
gan - Tas nozīmē, ka animācija sekos gan virzienā, ti, uz priekšu, gan atpakaļ
Sintakse:
animācijas aizpildīšanas režīms: nav | uz priekšu | atpakaļ | gan
.anim {width: 50px height: 50px background: gaiši zila krāsa: balts fonta svars: treknā pozīcija: relatīvais animācijas nosaukums: cssanim animācijas ilgums: 5s animācijas atkārtojumu skaits: bezgalīgs robežas rādiuss: 100%} # anim1 { animācijas laika iestatīšanas funkcija: vieglums} # anim2 {animācijas laika iestatīšanas funkcija: lineāra} # anim3 {animācijas laika iestatīšanas funkcija: viegluma iekļaušana} # anim4 {animācijas laika iestatīšanas funkcija: atvieglošana} # anim5 {animācija- timing-function: easy-in-out} @keyframes cssanim {no {left: 0px} uz {left: 400px}}- animācijas-spēles stāvoklis
Šis rekvizīts norāda, ka animācija ir vai nu atskaņota, vai apturēta. Turklāt, kad animācija tiek atsākta no pauzes, tā sākas no vietas, kur tā palika.Iespējamās vērtības ir:
- spēlē - Lai animācija tiktu rādīta darbībā
- apstājās - Lai animāciju padarītu pauzes stāvoklī.
Sintakse:
animācijas-spēles stāvoklis: pārtraukts | spēlē
.anim {width: 100px height: 100px background: gaiši zila pozīcija: relatīvais animācijas nosaukums: cssanim animācijas ilgums: 3s animācijas aizkave: 2s animācijas aizpildīšanas režīms: atpakaļ robežas rādiuss: 100%} @ keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animācija
Tas ir pazīstams kā animācijas stenogrāfijas īpašums. To lieto tīrāka koda iegūšanai. Kad esam pieraduši pie visām animācijas īpašībām, ieteicams izmantot animācijas stenogrammu ātrākai kodēšanai un visu rekvizītu definēšanai vienā rindā.
Sintakse:
animācija: [animācijas nosaukums] | [animācijas ilgums] | [animācijas-laika funkcija] |[animācijas kavēšanās] | [animācijas atkārtojumu skaits] | [animācijas virziens] |[animācijas aizpildīšanas režīms] | [animācijas-spēles-stāvoklis]
Visus animācijas efektus, kurus mēs parādām iepriekš, izmantojot dažādas animācijas īpašības, var sasniegt, izmantojot stenogrāfijuanimācija īpašums.
.anim {height: 200px width: 200px background: lightblue position: relatīvais apmales rādiuss: 100% animation-name: cssanim animation-duration: 2s animation direction: normāls animācijas-play-state: pauzēts} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Tādējādi tiek pabeigti visi animācijas rekvizīti, kurus var izmantot CSS. Mums vajadzētu izmēģināt dažādas šo īpašību variācijas, lai iegūtu skaidrāku priekšstatu. Kad mums būs ērti, animācijas stenogrāfijas īpašums var būt ļoti noderīgs, lai uzrakstītu tīrāku un ātrāku kodu. Šī ir viena no svarīgākajām prasmēm, kas jāapgūst CSS tīmekļa izstrādātājiem. Tā kā mums ir tendence vairāk koncentrēties uz kustīgiem objektiem, nevis uz statiskiem, animācijas var mums palīdzēt to sasniegt, kā arī izstrādāt izcilas ievērojamas tīmekļa vietnes.
Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.
Vai mums ir jautājums? Lūdzu, pieminējiet to bloga “Animācijas CSS” komentāru sadaļā, un mēs ar jums sazināsimies.