CSS on üks võimsamaid viise veebilehe interaktiivseks muutmiseks. See muudab meie põhilise välimuse ja tunde veebileht. Üks olulisi ja põnevaid funktsioone, mida CSS pakub, on see, et see võimaldab meil teha animatsioone. See võimaldab meil oma lehe elemente teisaldada. Alustame CSS-is animeeritud teekonda järgmises järjekorras:
Animatsioonid CSS-is
Animatsioonide lisamine meie veebisaidile on suurepärane viis kasutajate tähelepanu juhtimiseks. See mitte ainult ei lisa meie lehele väärtust, vaid rikastab ka kasutajakogemust. CSS-is olev animatsioon on üles ehitatud kahele osale. Nemad on
kuidas takistada ummikseisu Java
- Võtmekaadrid
- Animatsioon
CSS-i animatsioone toetatakse kõigis brauserites. Mõni vanem brauser, näiteks Safari (kuni versioonini 8.0), nõuab animatsiooni omaduste tõlgendamiseks siiski eesliidet (-webkit-). Näiteks:
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% -webkit-animation-name: cssanim / * vanad brauserid * / -webkit-animation-duration: 5s / * vanad brauserid * / animation -name: cssanim animation-duration: 5s} / * vanad brauserid * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {jäänud: 300px}}Edasiste näidete proovimiseks saame kasutada ülaltoodud HTML-i näidislehte ja asendada stiilimärgendis CSS-koodi.
Võtmekaadrid CSS-is
See on CSS-i animatsioonide ehituskivi. Selle abil määrati meie veebilehel animatsiooni konkreetsed hetked ja stiilid. Teisisõnu, kui me määrame oma CSS-is @ võtmekaadrid, saab see kontrolli praeguse oleku muutmiseks uueks olekuks või objektide teatud aja jooksul animeerimiseks.
@ Võtmekaadritel peab olema animatsiooni juhtimiseks teatud omadused, näiteks animatsiooni nimi, etapid ja atribuudid.
Nimi - Iga animatsiooni nimi peab olema selle käitumise kirjeldamiseks.
Etapid - Lava tähistab animatsiooni valmimist. Seda saab tähistada kas märksõnaga „kuni” ja „alates” või protsentides, kusjuures 0% tähistab animatsiooni algolekut ja 100% animatsiooni lõppolekut. Protsentuaalse kujutise kasutamise eeliseks on see, et saame defineerida mitu vaheetappi nende vahel, st milline peaks olema animatsiooni käitumine 50% või 75% etapis jne.
Atribuudid - Need omadused annavad meile kontrolli @ võtmekaadrite üle, et neid animatsiooni ajal manipuleerida.
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 5s} @ keyframes cssanim {0% {transform: scale (0.5) läbipaistmatus: 0} 50 % {teisenda: skaala (1,5) läbipaistmatus: 1} 100% {muuda: skaala (1)}}Kuna võtmekaadrite määratlemine on meil selge. Uurime animatsiooni omadusi, et kirjeldada, kuidas oma elemente ja objekte animeerida. Neid kahte omadust, st pärimist ja algust saab kasutada kõigi animatsioonitüüpidega. Neid omadusi kasutatakse tavaliselt koos div-märgendiga erineva käitumise avaldamiseks.
initsiaal: Määrab selle atribuudi vaikeväärtuseks.
pärima: Pärib selle omaduse oma vanemelemendilt.
Animatsiooni omadused
- animatsiooni nimi
See määrab animatsiooni nime, mida kasutatakse @keyframes'is manipuleerimiseks.Võimalikud väärtused on:
- nimi: See määrab animatsiooni võtmekaadriga seonduva nime.
- ükski: See on vaikeväärtus ja seda saab kasutada päritud või kaskaad-animatsioonide tühistamiseks.
Süntaks:
animatsiooni nimi: nimi | ükski | initsiaal | pärima
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animatsiooni kestus
See määrab animatsiooni ühe täitmise aja. See on määratletud sekundites või millisekundites (nt 4 s või 400 ms). Selle atribuudi vaikeväärtus on 0s, nii et kui seda omadust pole määratud, siis animatsiooni ei toimu.
Süntaks:
animatsiooni kestus: aeg
.anim {height: 200px width: 200px background: sinine positsioon: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {teisenda: skaala (1.4) läbipaistmatus: 1} 100% {muuda: skaala (1)}}- animatsioon-viivitus
Atribuut animation-delay võimaldab meil täpsustada animatsiooni viivitust. See määratleb, millal animatsiooni jada käivitatakse.
Selle omaduse väärtuse saab deklareerida sekundite (sekundites) või millisekundites (ms). See võib hoida nii positiivseid kui ka negatiivseid väärtusi. Positiivne väärtus näitab, et animatsioon algab pärast määratud aja möödumist ja seni jääb see üksmeelseks. Teiselt poolt käivitab negatiivne väärtus animatsiooni kohe punktist, nagu oleks see juba määratud aja jooksul käivitatud.
Süntaks:
animatsioon-viivitus: aeg
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {vasakul: 250px}}- animatsioon-iteratsioon-loendus
See omadus näitab, mitu korda peaks animatsioonijada esitama. Selle atribuudi vaikeväärtus on 1.Võimalikud väärtused on:
- number - tähistab korduste arvu
- lõpmatu - näitab, et animatsioon peaks igavesti korduma
Süntaks:
animatsioon-iteratsioonide arv: arv | lõpmatu
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {vasakule: 100 pikslit}}- animatsiooni suund
See määratleb animatsiooni suuna. Elemendi suuna saab seadistada mängima edasi, tagasi või vahelduvate tsüklitena.Selle omaduse vaikeväärtus on normaalne ja see lähtestatakse igas tsüklis.Võimalikud väärtused on:
normaalne - See on vaikekäitumine ja animatsioon esitatakse edasi. Pärast iga tsüklit saab animatsioon algsesse olekusse ja mängitakse uuesti edasi
tagurpidi - Animatsiooni mängitakse tahapoole. Pärast iga tsüklit saab animatsioon lõppseisundi ja seda mängitakse tagasi
asendusliige - Animatsiooni suund on vastupidine, st see mängib kõigis tsüklites kõigepealt edasi ja siis tagasi. Iga paaritu tsükkel muudab animatsiooni edasi ja paaritu tsükkel tagurpidi liikumise.
asendusliikumine-tagurpidi - Animatsiooni suund pööratakse vaheldumisi. Siin mängitakse animatsiooni kõigil tahapoole ja seejärel edasi igal tsüklil. Iga paaritu tsükkel liigub tagurpidi või tagasi ning iga paaris tsükkel renderdab edasi animatsiooni.
Süntaks:
animatsiooni suund: normaalne | tagurpidi |asendusliige | asendusliikumine-tagurpidi
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {vasakule: 100 pikslit}}- animatsiooni-ajastus-funktsioon
See omadus määrab animatsiooni kiiruskõvera või liikumisstiili. See on määratud tegema animatsioonistiilis sujuvalt muudatusi ühelt vormilt teisele. Kui väärtust pole määratud, on see vaikimisi lihtne.Animatsiooni-ajastus-funktsiooni võimalikud väärtused on:
kergust - See on vara vaikeväärtus. Siin algab animatsioon aeglaselt, muutub keskel järk-järgult kiireks ja lõpeb seejärel aeglaselt.
lineaarne - Animatsioon hoiab kogu tsükli jooksul sama kiirust, st algusest lõpuni.
lihtsus sisse - Animatsioon algab aeglaselt.
lihtsus välja - Animatsioon lõpeb aeglaselt.
lihtsus sisse-välja - Animatsioon liigub aeglaselt nii alguse kui ka lõpu ajal.
kuup-bezier (n, n, n, n) - See täiustatud funktsioon laseb meil oma väärtuste määratlemisel luua kohandatud ajastamisfunktsiooni. Võimalik väärtus jääb vahemikku 0 kuni 1.
Süntaks:
animatsiooni-ajastus-funktsioon: lineaarne | lihtsus | kergendus | hõlbustus | sisselülitamise lihtsus |kuup-bezier (n, n, n, n)
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {taust: kollane vasak: 200 pikslit ülaosas: 200 pikslit} 100% {taust: sinine vasak: 100 pikslit}}- animatsiooni täitmise režiim
See on eriline omadus, kuna see määrab animatsiooni stiili enne või pärast animatsiooni esitamist.Nagu vaikimisi, ei mõjuta animatsioon elemendi stiili enne ega pärast selle algust. See omadus on kasulik, kuna see aitab animatsiooni selle vaikekäitumise alistada.Animatsiooni täitmise režiimi atribuudi võimalikud väärtused on järgmised.
mitte ühtegi - See on atribuudi vaikeväärtus, st animatsioonistiile ei rakendata elemendile enne ega pärast animatsiooni.
edasi - Stiile hoiab element lõplikus animatsioonijärjestuses, st pärast animatsiooni lõppu.
tahapoole - Stiile hoiab element esialgses animatsioonijärjestuses, st enne animatsiooni vaatamist, eriti animatsiooni viivituse ajal.
mõlemad - See tähendab, et animatsioon järgneb nii suunas kui edasi ja tagasi
Süntaks:
animatsiooni täitmise režiim: puudub | edasi | tahapoole | mõlemad
.anim {laius: 50px kõrgus: 50px taust: helesinine värv: valge fondi kaal: paks asukoht: suhteline animatsioon-nimi: cssanim animatsiooni kestus: 5s animatsioon-iteratsioonide arv: lõpmatu piiri-raadius: 100%} # anim1 { animatsioon-ajastus-funktsioon: lihtsus} # anim2 {animatsiooni ajastus-funktsioon: lineaarne} # anim3 {animatsiooni ajastus-funktsioon: lihtsus-sisse} # anim4 {animatsiooni ajastus-funktsioon: kergendus-välja} # anim5 {animatsioon- ajastusfunktsioon: hõlpsasti sisselaskmine} @keyframes cssanim {{left: 0px} - {left: 400px}}- animatsioon-mäng-olek
See omadus määrab animatsiooni kas mängimis- või peatatud olekus. Samuti, kui animatsiooni jätkatakse pausist, algab see sealt, kust see lahkus.Võimalikud väärtused on:
- mängides - animatsiooni renderdamine jooksvalt
- peatatud - animatsiooni renderdamiseks pausi olekus.
Süntaks:
animatsioon-mäng-olek: peatatud | mängides
.anim {width: 100px height: 100px background: helesinine asukoht: suhteline animatsiooni nimi: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: tagurpidi piiri-raadius: 100%} @keyframes cssanim {0% {top: 0px taustavärv: oranž} 50% {top: 0px taustavärv: roheline} 100% {top: 100pxbackground-color: blue}}- animatsioon
See on tuntud kui animatsiooni lühikirjeldus. Seda kasutatakse puhtama koodi jaoks. Kui oleme animatsiooni kõigi omadustega harjunud, on soovitatav kasutada animatsiooni lühikirjeldust kiiremaks kodeerimiseks ja kõigi omaduste määratlemiseks ühel real.
Süntaks:
animatsioon: [animatsiooni nimi] | [animatsiooni kestus] | [animatsiooni-ajastus-funktsioon] |[animatsiooni viivitus] | [animatsiooni-iteratsiooni loendamine] | [animatsiooni suund] |[animatsiooni täitmise režiim] | [animatsioon-mäng-olek]
Kõiki animatsiooniefekte, mida me ülal näitame, kasutades erinevaid animatsiooni omadusi, saab saavutada lühikirja abilanimatsioon vara.
.anim {height: 200px width: 200px background: helesinine asukoht: suhteline piiriraadius: 100% animation-name: cssanim animation-duration: 2s animation direction: normal animation-play-state: paused} @ keyframes cssanim {0% {taust: oranž ülaosa: 0px} 50% {taust: kollane vasak: 200px ülaosa: 200px} 100% {taust: sinine vasak: 100px}}See lõpetab kõik animatsiooni atribuudid, mida saab CSS-is kasutada. Selgema pildi saamiseks peaksime proovima nende omaduste erinevaid variatsioone. Kui meil läheb mugavaks, võib animatsiooni lühikirjeldus olla puhtama ja kiirema koodi kirjutamiseks suureks abiks. See on üks olulisi oskusi, mida veebiarendajatele CSS-is õppida. Kuna me keskendume pigem liikuvatele kui staatilistele objektidele, võivad animatsioonid aidata meil seda saavutada ja arendada ka suurepäraseid tähelepanuväärseid veebisaite.
Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.
Kas teil on meile küsimus? Palun mainige seda ajaveebi “Animatsioonid CSS-is” kommentaaride osas ja me võtame teiega ühendust.