Šiame straipsnyje parodytas kelių žingsnių animacijos ir perėjimų pridėjimo procesas.
Kaip naudoti kelių žingsnių animaciją ir perėjimus?
Norint sukurti kelių žingsnių animaciją, sugeneruojama pagrindinių kadrų serija. Ji nurodo pakeitimų, kurie turi būti taikomi pasirinktam HTML elementui, seriją. Kiekvienas pagrindinis kadras rodo skirtingą animacijos būseną, o naršyklė sklandžiai perkelia elementą tarp šių būsenų. Perėjimų metu nurodykite sklandų CSS ypatybių pasikeitimą per nurodytą trukmę dėl vartotojo sąveikos ar būsenos pasikeitimų.
Norėdami geriau suprasti, panagrinėkime praktinį pavyzdį:
1 pavyzdys: kelių žingsnių animacijos taikymas
Šiame pavyzdyje pasirinktam HTML elementui bus pritaikyta kelių žingsnių animacija. Apsilankykite toliau pateiktoje demonstracijoje:
< stilius >
.animationExample {
plotis: 130 pikselių;
aukštis: 130 pikselių;
fono spalva: miško žalia;
padėtis: santykinė;
animacija: moveAnimate 4s easy-in-out infinite;
}
< / stilius >
< kūnas >
< div klasė = 'animacijos pavyzdys' >< / div >
< / kūnas >
Aukščiau pateiktame kodo fragmente:
- Pirma, klasė pavadinimu „ animacijaPavyzdys “ yra pasirinktas viduje „
“ žymą. - Toliau reikšmės „ 130 piks “ yra priskirti „ aukščio “ ir „ plotis “ savybes.
- Be to, nustatykite „ miško žaluma “ ir „ giminaitis “ kaip „“ vertę fono spalva “ ir „ padėtis “ savybes, kad pagerintų vizualizaciją.
- Po to naudokite „ animacija “ savybę ir nustatykite ją lygią „ „MoveAnimate 4s“ lengvai įeis į išorę be galo “, kad pritaikytumėte animacijas.
- Reikšmė susideda iš keturių dalių: pirmoji yra tinkinto pavadinimo animacija, antroji – laikas, per kurį reikia užbaigti, trečioji – animacijos tipas, o ketvirtoji – riba, kiek kartų ši animacija bus taikoma.
- Pabaigoje sukurkite HTML elementą ir priskirkite „ animacijaPavyzdys “ klasę.
Dabar naudokite „ raktiniai kadrai “ taisyklė, skirta apibrėžti tinkintą “ judėti Animuoti “ animacija:
@ perkelti Animuoti pagrindinius kadrus {0 % {
liko: 0 ;
fono spalva: mėlyna;
}
penkiasdešimt % {
kairėje: 200 taškų;
fono spalva: miško žalia;
transformuoti: pasukti ( 180 laipsnių ) ;
}
100 % {
liko: 0 ;
fono spalva: mėlyna;
}
}
Aukščiau esančiame kodo bloke:
- Pirma, „ @keyframes “ blokas sukuriamas kartu su tinkintos animacijos, kuri bus apibrėžta, pavadinimu.
- Tada sukurkite bloką pavadinimu „ 0 % “, kuris taiko CSS stilius animacijos pradžioje. Ir naudokite ' fono spalva “ ir „ paliko “ CSS savybės.
- Dabar sukurkite bloką pavadinimu ir „ penkiasdešimt % “ stilizuoti animacijos viduryje. Jame pateikiamos vertybės 200 piks “, „ miško žaluma “ ir „ pasukti (180 laipsnių) “ į „kairę“, „fono spalva“ ir „transformuoti“ ypatybes. Tai leidžia pasirinktam elementui pasukti į kairę 200 pikselių.
Sudarius aukščiau pateiktą kodo bloką:
Išvestis rodo, kad kelių žingsnių animacija buvo pritaikyta pasirinktam HTML elementui.
2 pavyzdys: kelių žingsnių perėjimo taikymas
Norėdami pritaikyti kelių pakopų perėjimą, CSS parinkiklius galima naudoti kartu su „ perėjimas ' nuosavybė. Aplankykite žemiau esantį kodą:
.fade {
neskaidrumas: 1;
perėjimas: neskaidrumas 1s;
}
.fade:hover {
neskaidrumas: 0;
}
<
/ stilius>
<
kūnas>
< p klasė = 'išblukti' > Užveskite pelės žymeklį virš manęs, kad pamatytumėte perėjimą. < / p >
< / kūnas >
Aukščiau pateikto kodo paaiškinimas:
- Pirma, paprotys išblukti Pasirinkta klasė ir 1 reikšmė pateikiama ' neskaidrumas ' nuosavybė. Taip pat nustatykite reikšmę „ neskaidrumas 1s “ į „ perėjimas “ CSS nuosavybė. Tai nustato arba pašalina neskaidrumą per laikotarpį „ 1s “.
- Toliau „ :užveskite pelės žymeklį ' parinkiklis yra priskirtas ' išblukti ' klasė. Jame reikšmė „ 0 “ yra nustatytas į neskaidrumo ypatybę.
- Galų gale HTML elementas sukuriamas „
“ žyma ir „klasė išblukti “.
Pasibaigus kompiliavimo etapui, tinklalapis atrodo taip:
GIF rodo, kad pasirinktam HTML elementui pritaikytas tinkintas išnykimo perėjimas.
Išvada
Kelių žingsnių animacija ir perėjimai suteikia gyvybės HTML tinklalapiams pridedant judesio ir vaizdo efektų. Animacijai „ raktiniai kadrai “ yra naudojami kartu su trukmės procentais, pvz., „ 0 % “ yra pradžia, “ penkiasdešimt % “ yra vidurys ir „ 100 % “ – tai animacijos trukmės pabaiga. Perėjimui CSS parinkiklis gali būti naudojamas kartu su „ perėjimas ' klasė. Šiame straipsnyje parodytas kelių žingsnių animacijos ir perėjimų naudojimo procesas.