CSS on yksi tehokkaimmista tavoista tehdä verkkosivusta interaktiivinen. Se muuttaa perusilmeemme ulkoasun ja tunteen Nettisivu. Yksi CSS: n tärkeistä ja mielenkiintoisista ominaisuuksista on, että sen avulla voimme tehdä animaatioita. Sen avulla voimme siirtää elementtejä sivullamme. Aloitetaan matkamme animaatioista CSS: ssä seuraavassa järjestyksessä:
Animaatiot CSS: ssä
Animaatioiden lisääminen verkkosivustollemme on hyvä tapa kiinnittää käyttäjien huomio. Se ei vain lisää arvoa sivullemme, vaan myös rikastuttaa käyttäjäkokemusta. CSS: n animaatio perustuu kahteen osaan. He ovat
- Avainkehykset
- Animaatio
CSS-animaatioita tuetaan kaikissa selaimissa. Jotkin vanhemmat selaimet, kuten Safari (versioon 8.0 asti), edellyttävät kuitenkin etuliitettä (-webkit-) animaatio-ominaisuuksien tulkitsemiseksi. Esimerkiksi:
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunan säde: 100% -webkit-animation-name: cssanim / * vanhat selaimet * / -webkit-animation-duration: 5s / * vanhat selaimet * / animaatio -nimi: cssanim animation-duration: 5s} / * vanhat selaimet * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {jäljellä: 300 kuvapistettä}}Voimme käyttää ylhäältä tulevaa HTML-mallisivua ja korvata CSS-koodin tyylitagissa kokeilemaan muita esimerkkejä.
Avainkehykset CSS: ssä
Tämä on CSS: n animaatioiden rakennusosa. Sillä määriteltiin verkkosivullamme animaation tietyt hetket ja tyylit. Toisin sanoen, kun määritämme @ avainkehykset CSS: ssä, se saa hallinnan muokata nykyistä tilaa uudeksi tilaksi tai animoida objektit tietyn ajan.
@ Avainkehyksillä on oltava tietyt ominaisuudet animaation hallitsemiseksi, kuten animaation nimi, vaiheet ja ominaisuudet.
Nimi - Jokaisen animaation on oltava nimi, joka kuvaa sen käyttäytymistä.
Tasot - Vaihe edustaa animaation valmistumista. Se voidaan tehdä joko 'to' ja 'from' avainsanalla tai prosentteina, kun taas 0% edustaa animaation alkutilaa ja 100% edustaa lopputilaa. Prosentuaalisen esityksen käytön etuna on, että voimme määritellä useita välivaiheita välillä, toisin sanoen miten animaation tulisi toimia 50%: n tai 75%: n vaiheessa jne.
Ominaisuudet - Nämä ominaisuudet antavat meille mahdollisuuden hallita @ avainkehyksiä manipuloida niitä animaation aikana.
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animation-duration: 5s} @ avainkehykset cssanim {0% {muunna: mittakaava (0.5) peittävyys: 0} 50 % {muunna: asteikko (1,5) peittävyys: 1} 100% {muunnos: asteikko (1)}}Nyt kun olemme selkeitä avainkehysten määrittelemisestä. Tutkitaan animaatio-ominaisuuksia ja kuvaillaan, miten animoida elementtejä ja esineitä. Kaksi ominaisuutta, eli periä ja alku, voidaan käyttää kaikkien animaatiotyyppien kanssa. Näitä ominaisuuksia käytetään yleensä div-tunnisteen kanssa erilaisten käyttäytymismuotojen osoittamiseksi.
varhainen: Asettaa tämän ominaisuuden oletusarvoonsa.
periä: Perii tämän ominaisuuden pääelementistä.
lajittele c ++ -taulukko
Animaation ominaisuudet
- animaation nimi
Se määrittää animaation nimen, jota käytetään @keyframes-sovelluksessa manipulointiin.Mahdolliset arvot ovat:
- nimi: Tämä määrittää nimen, joka sidotaan animaation avainkehykseen.
- ei mitään: Tämä on oletusarvo, ja sitä voidaan käyttää perittyjen tai kaskadoitujen animaatioiden ohittamiseen.
Syntaksi:
animaation nimi: nimi | ei mitään alkukirjain periä
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animation-duration: 5s} @ avainkehykset cssanim {0% {left: 0px} 100% {left: 300px} }- animaatio-kesto
Se määrittää ajan, jonka animaatio vie yhden suorituksen suorittamiseen. Se määritetään sekunteina tai millisekunteina (esim. 4s tai 400ms). Tämän ominaisuuden oletusarvo on 0 s, joten jos tätä ominaisuutta ei ole määritetty, animaatio ei tapahdu.
Syntaksi:
animaatio-kesto: aika
.anim {korkeus: 200 kuvapisteen leveys: 200 kuvapisteen tausta: sininen sijainti: suhteellinen reunan säde: 100% animaation nimi: cssanim animaation kesto: 4s} @ avainkehykset cssanim {0% {muunna: mittakaava (0.4) peittävyys: 0} 50 % {muunnos: asteikko (1.4) peittävyys: 1} 100% {muunnos: asteikko (1)}}- animaatio-delay
Animaation viive -ominaisuuden avulla voimme määrittää viiveen animaatiossa. Se määrittää, milloin animaatiosarja alkaa suorittaa.
Tämän ominaisuuden arvo voidaan ilmoittaa joko sekunteina tai millisekunteina (ms). Se voi sisältää sekä positiivisia että negatiivisia arvoja. Positiivinen arvo osoittaa, että animaatio alkaa määritetyn ajan kuluttua ja siihen saakka se pysyy yksimielisenä. Toisaalta negatiivinen arvo aloittaa animaation välittömästi pisteestä ikään kuin se olisi jo suorittanut tietyn ajanjakson.
Syntaksi:
animaatio-delay: aika
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animaation kesto: 4s animaation viive: 4s} @ avainkehykset cssanim {0% {left: 0px} 100% {vasen: 250px}}- animaatio-iteraatio-määrä
Tämä ominaisuus osoittaa, kuinka monta kertaa animaatiosarja tulisi toistaa. Tämän ominaisuuden oletusarvo on 1.Mahdolliset arvot ovat:
- määrä - tarkoittaa iteraatioiden määrää
- ääretön - osoittaa, että animaation tulisi toistua ikuisesti
Syntaksi:
animaatio-iteraatio-määrä: numero | ääretön
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animaation kesto: 2s animaatio-iterointiluku: 4} @keyframes cssanim {0% {left: 0px} 100% {jäljellä: 100 kuvapistettä}}- animaatio-suunta
Se määrittelee animaation suunnan. Elementin suunta voidaan asettaa toistamaan eteenpäin, taaksepäin tai vuorotellen.Tämän ominaisuuden oletusarvo on normaali, ja se nollautuu jokaisella jaksolla.Mahdolliset arvot ovat:
normaalia - Tämä on oletuskäyttäytyminen ja animaatio toistetaan eteenpäin. Jokaisen jakson jälkeen animaatio palaa alkutilaansa ja sitä toistetaan uudelleen eteenpäin
käänteinen - Animaatio toistetaan taaksepäin. Jokaisen jakson jälkeen animaatio saavuttaa lopputilan ja sitä toistetaan taaksepäin
vuorotellen - Animaation suunta on päinvastainen, ts. Se soittaa ensin eteenpäin ja sitten taaksepäin jokaisessa jaksossa. Jokainen pariton sykli tekee eteenpäin-animaation ja jokainen parillinen sykli tekee taaksepäin liikkumisen.
vuorotellen taaksepäin - Animaation suunta käännetään vuorotellen. Tällöin animaatio toistetaan ensin taaksepäin ja sitten eteenpäin jokaisessa jaksossa. Jokainen pariton sykli liikkuu taaksepäin tai taaksepäin, ja jokainen parillinen sykli tekee eteenpäin-animaation.
Syntaksi:
animaation suunta: normaali | taaksepäin |varajäsen | vuorotellen taaksepäin
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animaation kesto: 2s animaatio-iterointiluku: ääretön} @keyframes cssanim {0% {left: 0px} 100% {jäljellä: 100 kuvapistettä}}- animaatio-ajoitus-toiminto
Tämä ominaisuus määrittää nopeuskäyrän tai animaation liikkumistyylin. Se on määrätty muuttamaan animaatiotyyliä sujuvasti lomakkeesta toiseen. Jos arvoa ei ole määritetty, se oletusarvoisesti helpottuu.Animaatio-ajoitus-toiminnon mahdolliset arvot ovat:
helppous - Tämä on kiinteistön oletusarvo. Täällä animaatio alkaa hitaasti, muuttuu vähitellen nopeaksi keskelle ja päättyy sitten hitaasti.
lineaarinen - Animaatio ylläpitää saman nopeuden koko jakson ajan eli alusta loppuun.
esimerkki java-komentoriviargumenteista
helppous - Animaatio alkaa hitaasti.
helppous - Animaatio päättyy hitaasti.
helppous sisään-ulos - Animaatio liikkuu hitaasti sekä alussa että lopussa.
kuutio-bezier (n, n, n, n) - Tämän edistyneen ominaisuuden avulla voimme luoda mukautetun ajoitustoiminnon määrittelemällä omat arvomme. Mahdollinen arvo vaihtelee 0: sta 1: een.
Syntaksi:
animaatio-ajoitus-toiminto: lineaarinen | helppous | helppous | helppous | helppous sisään-ulos |kuutio-bezier (n, n, n, n)
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animaation kesto: 2s animaation suunta: taaksepäin} @ keyframes cssanim {0% {tausta: oranssi vasen: 0px } 50% {tausta: keltainen vasen: 200 kuvapistettä ylhäällä: 200 kuvapistettä} 100% {tausta: sininen vasen: 100 kuvapistettä}}- animaatio-täyttö-tila
Tämä on erityinen ominaisuus, koska se määrittää animaatiotyylin ennen tai jälkeen animaation toistamisen.Kuten oletusarvoisesti, animaatio ei vaikuta elementin tyyliin ennen sen alkua tai sen jälkeen. Tämä ominaisuus on hyödyllinen, koska se auttaa ohittamaan tämän animaation oletuskäyttäytymisen.Seuraavat ovat mahdollisia arvoja animaation täyttö-ominaisuudelle:
ei mitään - Tämä on ominaisuuden oletusarvo, eli animaatiotyylejä ei sovelleta elementtiin ennen animaatiota tai sen jälkeen.
eteenpäin - Tyylit säilyvät elementissä lopullisessa animaatiosekvenssissä, eli kun animaatio on valmis.
taaksepäin - Elementti säilyttää tyylit alkuperäisessä animaatiosekvenssissä, ts. Ennen kuin animaatio tuijotetaan erityisesti animaation viiveen aikana.
molemmat - Tämä tarkoittaa, että animaatio seuraa sekä eteenpäin että taaksepäin
Syntaksi:
animaatio-täyttö-tila: ei mitään | eteenpäin | taaksepäin | molemmat
.anim {leveys: 50 kuvapisteen korkeus: 50 kuvapisteen tausta: vaaleansininen väri: valkoinen fontin paino: lihavoitu sijainti: suhteellinen animaation nimi: cssanim animaation kesto: 5s animaatio-iterointiluku: ääretön reunan säde: 100%} # anim1 { animaatio-ajoitus-toiminto: helppous} # anim2 {animaatio-ajoitus-toiminto: lineaarinen} # anim3 {animaatio-ajoitus-toiminto: helppous-sisään} # anim4 {animaatio-ajoitus-toiminto: helpotus-ulos} # anim5 {animaatio- ajoitus-toiminto: helppous-sisään-ulos} @keyframes cssanim {{vasemmalta: 0px} - {left: 400px}}- animaatio-toistotila
Tämä ominaisuus määrittää animaation olevan joko toisto- tai keskeytetyssä tilassa. Kun animaatio jatkuu tauosta, se alkaa siitä, mihin se jätti.Mahdolliset arvot ovat:
- pelaa - Animaation renderointi käynnissä
- keskeytetty - Animaatio tehdään taukotilassa.
Syntaksi:
animaatio-toistotila: keskeytetty | pelaa
.anim {leveys: 100px korkeus: 100px tausta: vaaleansininen sijainti: suhteellinen animaation nimi: cssanim animaation kesto: 3s animaation viive: 2s animaation täyttötila: taaksepäin reunan säde: 100%} @ avainkehykset cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animaatio
Tätä kutsutaan animaation lyhytomaisuudeksi. Sitä käytetään puhtaampaan koodiin. Kun olemme tottuneet kaikkiin animaatio-ominaisuuksiin, on suositeltavaa käyttää animaation lyhennettä koodaamiseen nopeammin ja määritellä kaikki ominaisuudet yhdellä rivillä.
Syntaksi:
animaatio: [animaation nimi] | [animaation kesto] | [animaatio-ajoitus-toiminto] |[animaation viive] | [animaatio-iteraatio-määrä] | [animaatio-suunta] |[animaatio-täyttö-tila] | [animaatio-toistotila]
Kaikki animaatioefektit, jotka näytämme yllä käyttämällä erilaisia animaatio-ominaisuuksia, voidaan saavuttaa käyttämällä lyhennettäanimaatio omaisuus.
.anim {korkeus: 200px leveys: 200px tausta: vaaleansininen sijainti: suhteellinen reunusäde: 100% animaation nimi: cssanim animaation kesto: 2s animaation suunta: normaali animaatio-toistotila: taukotila} @keyframes cssanim {0% {tausta: oranssi yläosa: 0 kuvapistettä} 50% {tausta: keltainen vasen: 200 kuvapistettä: 200 kuvapistettä} 100% {tausta: sininen vasen: 100 kuvapistettä}}Tämä päättää kaikki animaatio-ominaisuudet, joita voidaan käyttää CSS: ssä. Meidän tulisi kokeilla näiden ominaisuuksien eri muunnelmia saadaksemme selkeämmän kuvan. Kun tulemme mukavaksi, animaation lyhytominaisuus voi olla suuri apu puhtaamman ja nopeamman koodin kirjoittamisessa. Tämä on yksi tärkeistä taidoista, jotka web-kehittäjille on opittava CSS: ssä. Koska keskitymme enemmän liikkuviin kuin staattisiin kohteisiin, animaatiot voivat auttaa meitä saavuttamaan tämän ja myös kehittämään merkittäviä merkittäviä verkkosivuja.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se 'Animaatiot CSS: ssä' -blogin kommenttiosassa ja palaamme sinuun.