Home-theater-designers
CSS dod izstrādātājiem iespēju atdzīvināt savas tīmekļa lapas, izmantojot atslēgu kadru animāciju.
CSS animācija tiek panākta, mainot HTML elementa sākotnējo stāvokli, izmantojot tā dažādās īpašības. Daži vispārīgi CSS rekvizīti, kurus var animēt, ietver:
kā savienot wii ar viedo televizoru
- Platums
- Augstums
- Pozīcija
- Krāsa
- Necaurredzamība
Ar šīm vispārīgajām CSS īpašībām manipulē konkrēti CSS elementi, lai radītu vēlamo rezultātu. Ja tīmekļa lapā kādreiz esat saskāries ar animētu elementu, iespējams, ka elements tika animēts, izmantojot atslēgu kadru animāciju.
Kas ir atslēgkadru elements?
The atslēgkadru elements var izmantot vienam vai vairākiem HTML elementiem, kuriem tai ir piekļuve. Tas identificē noteiktu elementa stāvokļa punktu un nosaka šī elementa izskatu.
Tas varētu šķist daudz sagremojama, bet patiesībā tas ir pavisam vienkārši. The atslēgkadru elements ir diezgan vienkārša struktūra, kuru var viegli saprast un pielāgot, lai tā atbilstu visām animācijas prasībām.
Atslēgu kadru struktūras piemērs
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Pieņemsim, ka vēlaties animēt zaļu taisnstūra pogu, pārvēršot to par zilu apaļu pogu.
Parametru ietvaros no sadaļā, jums būs jāievieto viss nepieciešamais stils, lai elements izskatītos kā zaļa taisnstūra poga, tad uz sadaļā, jūs ievietojat visas stila prasības, lai šo pogu pārveidotu par zilu apaļu pogu.
Ja jūs domājat, tas neizklausās pēc animācijas. Tas ir tāpēc, ka visa šī procesa galvenā sastāvdaļa vēl nav jāievieš-šī sastāvdaļa ir animācijas īpašums.
Animācijas īpašums
The animācijas īpašums ir dažādu apakšīpašību kopums; tos izmanto kopā ar iepriekšminēto atslēgu kadru struktūru, lai animētu vēlamo HTML elementu.
Tomēr, lai savos projektos panāktu animāciju, jums jāzina tikai pieci no šiem apakšīpašumiem un ar tiem saistītās vērtības. Šīs īpašības ir pazīstamas kā:
- Animācijas nosaukums
- Animācijas ilgums
- Animācijas laika noteikšanas funkcija
- Animācija-aizkavēšanās
- Animācijas atkārtojumu skaits
Animācijas izmantošana tīmekļa lapā
Izmantojot iepriekš minēto scenāriju, mērķis ir izveidot animētu pogu.
Pogas animācijas piemērs
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
Iepriekš minētā koda animācijas sadaļā ir pieci apakšīpašumi, kas tika minēti iepriekš. Katram īpašumam ir ļoti atšķirīga funkcija, un kopā tie darbojas, lai animētu jebkuru HTML elementu, pēc kura tie ir atlasīti.
Saistīts: Kā atlasīt tīmekļa lapas daļu, izmantojot CSS atlasītājus
Animācijas nosaukuma īpašums
Šis īpašums ir vissvarīgākais īpašums sarakstā. Bez animācijas nosaukuma īpašums , jums nebūtu neviena identifikatora, kuru varētu pārvietot uz atslēgkadru elements padarot visu parametros esošo kodu bezjēdzīgu.
Ja esat aizmirsis iekļaut vienu vai divus citus apakšīpašumus, jums joprojām var būt diezgan pienācīga animācija. Tomēr, ja esat aizmirsis animācijas nosaukuma īpašums jums nebūtu animācijas.
Animācijas ilguma īpašums
Šis rekvizīts tiek izmantots, lai noteiktu, cik daudz laika animētam elementam vajadzētu veikt, pārejot no viena stāvokļa uz nākamo.
Iepriekš minētajā piemērā ,. animācijas ilguma īpašums ir iestatīts uz 5 sekundēm (5 s), tāpēc zaļajai taisnstūra pogai kopumā būs 5 sekundes, pirms tā pilnībā kļūs par zilu apaļu pogu.
Īpašums Animācijas aizkave
Šis īpašums ir svarīgs viena iemesla dēļ; dažu tīmekļa lapu pilnīga ielāde var aizņemt dažas sekundes (vairāku dažādu faktoru dēļ). Tātad animācijas aizkaves īpašums neļauj animācijai nekavējoties sākt tikai gadījumā, ja tīmekļa lapas ielāde prasa kādu laiku.
Iepriekš minētajā piemērā ,. animācijas aizkaves īpašums ir iestatīts uz 4s, kas nozīmē, ka animācija sāksies tikai 4 sekundes pēc tīmekļa lapas apmeklējuma (dodot tīmekļa lapai pietiekami daudz laika, lai to ielādētu pirms animācijas sākuma).
Animācijas atkārtojumu skaits
Šis rekvizīts norāda, cik reizes animētajam elementam vajadzētu pāriet no viena stāvokļa uz nākamo. The īpašums animācijas-atkārtojumu skaits ņem vērtības, kas ir vārdi un cipari. Skaitļa vērtība var būt jebkas no 1 uz augšu, bet vārda vērtība parasti ir bezgalīgs .
Iepriekš minētajā piemērā ,. animācijas atkārtojumu skaita vērtība ir iestatīts uz bezgalīgs , kas nozīmē, ka tik ilgi, kamēr tīmekļa lapa atrodas augšup, pogas īpašums nepārtraukti animēsies no viena stāvokļa uz otru.
Animācijas laika funkcijas funkcija Īpašums
Šis īpašums nosaka animētā elementa kustību, pārejot no viena stāvokļa uz citu. The animācijas laika funkcijas funkcija parasti tiek piešķirta viena no trim viegluma vērtībām.
- Vienkāršība
- Vienkāršība
- Vienkārša izvadīšana
The viegli ieejoša vērtība tiek izmantots iepriekš; tas lēnām pārslēdz animāciju no viena stāvokļa uz otru. Ja mērķis ir izveidot lēnu pāreju, kad poga tiek pārveidota no zaļa taisnstūra uz zilu apli, izmantojiet viegla vērtība . Ja jūs vēlētos tikai lēnu pāreju pretējā virzienā, jūs izmantotu atvieglojuma vērtība .
Mūsu kodeksa samazināšana
Vairumā gadījumu programmas ilguma samazināšana tiek uzskatīta par praktisku pieeju. Tas ir galvenokārt tāpēc, ka mazāk koda rindu samazina iespēju, ka jūsu programmās kļūdas netiks pamanītas.
Iepriekš minēto kodu var samazināt par četrām rindām. To var panākt, vienkārši izmantojot animācijas īpašību, nepārprotami nenosakot katru tā apakšīpašumu.
Pogas animācijas piemēra koda samazināšana
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}