See artikkel tutvustab mitmeastmeliste animatsioonide ja üleminekute lisamise protsessi.
Kuidas kasutada mitmeastmelisi animatsioone ja üleminekuid?
Mitmeastmelise animatsiooni tegemiseks luuakse võtmekaadrite seeria. See määrab valitud HTML-elemendile rakendatavate muudatuste seeria. Iga võtmekaader tähistab animatsiooni erinevat olekut ja brauser viib elemendi sujuvalt üle nende olekute vahel. Üleminekute ajal määrake CSS-i atribuutide sujuv muutumine määratud aja jooksul kasutaja interaktsioonide või olekumuutuste kaudu.
Parema mõistmise huvides vaatame läbi praktilise näite:
Näide 1: Mitmeastmelise animatsiooni rakendamine
Selles näites rakendub valitud HTML-elemendile mitmeastmeline animatsioon. Külastage allolevat demonstratsiooni:
< stiilis >
.animationExample {
laius: 130 pikslit;
kõrgus: 130 pikslit;
taustavärv: metsaroheline;
asend: suhteline;
animatsioon: moveAnimate 4s easy-in-out lõpmatu;
}
< / stiilis >
< keha >
< div klass = 'animatsiooninäide' >< / div >
< / keha >
Ülaltoodud koodilõigul:
- Esiteks klass nimega ' animatsioonNäide ' on valitud jaotises '
” silti. - Järgmiseks väärtused ' 130 pikslit ” on määratud „ kõrgus ” ja „ laius ” omadused.
- Lisaks määrake ' metsaroheline ” ja „ sugulane ' väärtusena taustavärv ” ja „ positsiooni ” omadused visualiseerimise parandamiseks.
- Pärast seda kasutage ' animatsioon ' atribuut ja määrake see võrdseks väärtusega ' moveAnimate 4s lihtne sisse-välja lõputult ” animatsioonide rakendamiseks.
- Väärtus koosneb neljast osast, millest esimene on kohandatud nimega animatsioon, teine on valmimise aeg, kolmas on animatsiooni tüüp ja neljas on animatsiooni rakendumissagedus.
- Lõpuks looge HTML-element ja määrake ' animatsioonNäide ” klassi sellele.
Nüüd kasutage ' võtmekaadrid 'reegel kohandatud määratlemiseks' liigu Animate 'animatsioon:
@ liigutage võtmekaadrite animeerimine {0 % {
vasakule: 0 ;
taustavärv: sinine;
}
viiskümmend % {
vasakul: 200 pikslit;
taustavärv: metsaroheline;
teisendus: pööra ( 180 kraadi ) ;
}
100 % {
vasakule: 0 ;
taustavärv: sinine;
}
}
Ülaltoodud koodiplokis:
- Esiteks, ' @keyframes ” plokk luuakse koos määratletava kohandatud animatsiooni nimega.
- Järgmisena looge plokk nimega ' 0% ”, mis rakendab animatsiooni alguses CSS-stiile. Ja kasutage ' taustavärv ” ja „ vasakule ” CSS-i atribuudid.
- Nüüd looge plokk nimega ja ' viiskümmend% ” stiiliks animatsiooni keskel. See pakub väärtusi ' 200 pikslit ”, “ metsaroheline ” ja „ pöörata (180 kraadi) ” atribuutidele “vasakul”, “taustavärv” ja “teisendus”. See võimaldab valitud elementi pöörata vasakule 200 pikslit.
Pärast ülaltoodud koodiploki koostamist:
Väljund näitab, et valitud HTML-elemendile on rakendatud mitmeastmeline animatsioon.
Näide 2: Mitmeastmelise ülemineku rakendamine
Mitmeastmelise ülemineku rakendamiseks saab kasutada CSS-i valijaid koos ' üleminek ” vara. Külastage allolevat koodi:
.fade {
läbipaistmatus: 1;
üleminek: läbipaistmatus 1s;
}
.fade:hover {
läbipaistmatus: 0;
}
<
/ stiil>
<
keha>
< lk klass = 'tuime' > Ülemineku nägemiseks hõljutage kursorit minu kohal. < / lk >
< / keha >
Ülaltoodud koodi selgitus:
- Esiteks, kohandatud ' tuhmuma ' klass on valitud ja väärtus 1 antakse ' läbipaistmatus ” vara. Määrake ka väärtus ' läbipaistmatus 1s ' juurde ' üleminek ”CSS-i omadus. See määrab või eemaldab läbipaistmatuse aja jooksul ' 1s ”.
- Järgmiseks ' :hõljuma ' valija on määratud ' tuhmuma ” klass. Selles on väärtus ' 0 ” on seatud läbipaistmatuse atribuudile.
- Lõpuks luuakse HTML-element '
' silt ja klass ' tuhmuma ” on sellele lisatud.
Pärast koostamisfaasi lõppu näeb veebileht välja selline:
GIF kuvab, et valitud HTML-elemendile on rakendatud kohandatud tuhmumise üleminek.
Järeldus
Mitmeastmelised animatsioonid ja üleminekud toovad HTML-i veebilehtedele elu, lisades liikumist ja visuaalseid efekte. Animatsiooni jaoks on ' võtmekaadrid ' kasutatakse koos kestuse protsendiga nagu ' 0% 'on algus,' viiskümmend% ' on keskmine ja ' 100% ” on animatsiooni kestuse lõpp. Üleminekuks saab CSS-i valijat kasutada koos nupuga ' üleminek ” klass. See artikkel on demonstreerinud mitmeastmeliste animatsioonide ja üleminekute kasutamise protsessi.