HTML-kieli tarjoaa verkkosivun rakenteen, ja CSS tarjoaa sovelluksen suunnittelun ja muotoilun. Tämän yhdistelmän avulla voit myös lisätä animaatiota, koska animoidut elementit näyttävät houkuttelevammilta staattisiin elementteihin verrattuna. Se myös antaa elementin muuttaa tyyliään asteittain.
Tämä artikkeli opastaa kuinka voimme soveltaa animaatioita elementteihin. Joten, aloitetaan!
Mitä ovat CSS-animaatio-avainkehykset?
Jotta animaatio saadaan tehtyä, meidän on sidottava animaatio HTML-elementtiin. Käytä tähän tarkoitukseen avainsanaa ' @keyframes ” ja sen jälkeen animaation nimi. Tämä komponentti määrittää animaation alun ja lopun.
Kuinka määrittää CSS-animaatio-avainkehykset?
Animaatioavainkehysten määrittämiseksi CSS:ssä käymme läpi kaksi esimerkkiä.
Esimerkki 1
Voit määrittää animaatioavainkehykset CSS:ssä seuraavasti:
-
- Lisää , jonka luokan nimi on ' main-div ”.
- Lisää div:n sisään toinen div luokan nimellä ' img-peng ”.
- Sijoita kuva lisäämällä tähän img-peng-divukseen
. Tällä tunnisteella on kolme attribuuttia, ' src '-attribuutti kuvapolun tarjoamiseksi, ' kaikki ' on vaihtoehtoinen teksti, joka lisätään, jos kuvaa ei näytetä, ja ' leveys ”-attribuutti määrittää kuvan leveyden.
HTML
< div luokkaa = 'main-div' >
< div luokkaa = 'img-peng' >
< img src = 'images/pingviini.png' kaikki = 'pingviini' leveys = '100' >
div >
div >
.main-div {
CSS
leveys: 90 % ;
korkeus: 90px;
taustaväri: rgb ( 67 , 66 , 87 ) ;
marginaali: 20px auto;
täyte: 10px;
}
CSS:ssä ' .main-div ' on lisätty päästäkseen div-luokkaan. Siihen sovellettavat ominaisuudet selitetään alla:-
- ' leveys ” ominaisuuden arvo määrittää div:n leveyden.
- ' korkeus ' -ominaisuutta käytetään divin korkeuden asettamiseen.
- ' taustaväri ”-ominaisuus käyttää väriä elementin taustaan.
- ' marginaali ' on asetettu ' 20px auto ”, joka ilmaisee tilan ylhäältä ja alhaalta, ja auto tarkoittaa yhtäläistä tilaa vasemmalta ja oikealta.
- ' pehmuste ”-ominaisuuden arvoksi on määritetty 10px, mikä antaa tilaa elementin sisällön ympärille.
Tyylikäs img-peng-luokka
.img-peng {
leveys: 50px;
korkeus: 100px;
asema: suhteellinen;
animaatio: ravista;
animaation kesto: 2s;
animaatio-ajoitustoiminto: 2s;
animaatioiden iteraatioiden määrä: ääretön;
}
' .img-peng ” käytetään edellä olevassa HTML-tiedostossa mainittuun div-luokkaan. Tämä div-elementti on tyylitelty alla käsitellyillä ominaisuuksilla:-
- ' leveys ' ominaisuuden arvoa käytetään elementin leveyden asettamiseen.
- ' korkeus ' ominaisuuden arvoa käytetään elementin korkeuden asettamiseen.
- ' asema 'omaisuudelle on annettu arvo' suhteellinen ”, mikä tarkoittaa, että se sijoitetaan suhteessa normaaliasentoonsa.
- ' animaatio 'nimi annetaan muodossa' ravista ”. Voit kuitenkin nimetä animaation vaatimuksen mukaan.
- ' animaatio-kesto ” edustaa animaation kestoa, joka on 2 sekuntia.
- ' animaatio-ajoitustoiminto ” on määritetty arvoksi 2s, mikä tarkoittaa, että animaatio on valmis 2 sekunnissa.
- ' animaatioiden iteraatioiden määrä ” on asetettu äärettömäksi, mikä tarkoittaa, että tämä animaatio tapahtuu äärettömässä ajassa.
Määrittele @keyframes avainsanoilla to ja from
@ avainkehykset tärisevät {
alkaen {
yläreuna: 50px;
}
to {
marginaali-ala: 200px;
}
}
Kuvaan asetettujen animaation avainkehysten kuvaus on lueteltu alla:-
- ' @keyframes tärisee ” viittaa animaation nimeen shake, jota seuraa avainsana @keyframes. Tämän säännön puitteissa määritellään animaation käyttäytyminen.
- Sen kiharoiden suluissa on ' alkaen ' ja ' to ” avainsanat määrittävät eri aikavälit animaation käyttäytymisen määrittelemiseksi.
- ' alkuun ” -ominaisuuden arvoksi on määritetty 50 pikseliä, mikä tarkoittaa, että animaatio alkaa 50 pikselistä näytön yläreunasta ja jatkuu alareunassa olevaan 200 pikseliin.
Tämän seurauksena näet seuraavan tuloksen:
Anna nyt animaation käyttäytyä eri tavalla eri aikavälein. Käytä tätä varten @keyframes-kentissä olevia animaatioprosentteja.Määritä @keyframes prosenttiosuuksilla
@ avainkehykset tärisevät {
0 % {
vasemmalle: -50 pikseliä ;
}
25 % {
vasen: 50px;
}
viisikymmentä % {
vasemmalle: -25 kuvapistettä ;
}
75 % {
vasen: 25px;
}
100 % {
vasen: 10px;
}
}
Joten yllä olevan koodinpätkän kuvaus mainitaan tässä:-
- Prosenttiarvot 0%, 25%, 50%, 75% ja 100% edustavat animaatiota eri aikavälein.
- Lisäksi 0 %:lla kuvan vasemmalla puolella oleva tila on ' -50 pikseliä ”. 25 %:n kohdalla vasemmalla oleva tila on ' 50 pikseliä ”. 50 %:lla vasemmalla oleva tila on ' -25 kuvapistettä ”. 75 %:n kohdalla jäljellä oleva tila on ' 25px ”, ja kun animaatio on valmis (100 %), vasen väli on ' 10px ”.
Yllä oleva koodi näyttää seuraavan animaation:
Otetaan toinen esimerkki nähdäksesi kuinka voimme asettaa animaatioita kuviin.Esimerkki 2
Lisää HTML-koodiin
, jonka luokan nimi on ' Pääsivu ”. Aseta tämän-elementin sisään kaksi muuta div-tunnistetta, joissa on luokat ' pilvi1 ' ja ' pilvi2 ”, vastaavasti.HTML
< div luokkaa = 'Pääsivu' >
< div luokkaa = 'pilvi1' > div >
< div luokkaa = 'pilvi2' > div >
div >
kehon {
CSS
marginaali: 0 ;
pehmuste: 0 ;
}
CSS:ssä määritämme seuraavat CSS-ominaisuudet body-elementille:-
- ' marginaali ”-ominaisuus 0:na ei määritä tilaa elementin ympärillä.
- ' pehmuste ”-ominaisuus, jonka arvo on 0, ei määritä tilaa elementin sisällön ympärille.
Tyyli pääsivun div
.Pääsivu {
taustakuva: url ( / kuvia / susi-ilta.png ) ;
taustatoisto: ei toistoa;
taustan koko: kansi;
korkeus: 100vh;
asema: suhteellinen;
ylivuoto piilotettu;
}
Tässä:-
- ' .Pääsivu ' käytetään päästämään div-luokkaan.
- ' taustakuva 'omaisuudelle on annettu arvo' url(/images/wolf-night.png) ' jossa kuvat on kansio, joka sisältää kuvan wolf-night.png.
- ' taustatoisto 'omaisuudelle on annettu arvo' ei-toistoa , mikä tarkoittaa, että kuva näytetään kerran.
- ' taustan kokoinen ' on asetettu ' peite ” täyttääksesi koko div-elementin.
- ' korkeus ” on 100vh, joka on 100 % katseluportin korkeudesta.
- ' asema ' suhteellinen asettaa kuvan sijainnin suhteessa sen nykyiseen sijaintiin.
- ' ylivuoto ”-ominaisuuden arvo on asetettu piilotetuksi piilottamaan kuvan osan, joka on liian suuri mahtumaan säiliöön.
Tyylipilvi1 luokka
.pilvi1 {
taustakuva: url ( / kuvia / cloud.png ) ;
background-size: sisältää;
taustatoisto: ei toistoa;
sijainti: absoluuttinen;
yläreuna: 100px;
leveys: 500px;
korkeus: 300px;
animaatio: cloudanimation1;
animaation kesto: 70s;
animaatioiden iteraatioiden määrä: ääretön;
}
Div-luokkaa cloud1 sovelletaan seuraavilla selitetyillä ominaisuuksilla:-
- ' .pilvi1 ' käytetään päästäkseen div-luokkaan cloud1.
- ' taustakuva ”-ominaisuus on asetettu muotoon url(/images/cloud.png), jossa kuvat ovat kansio, joka sisältää kuvan cloud.png:n.
- ' taustan kokoinen ' arvolla ' sisältää ” varmistaa kuvan näkyvyyden.
- ' taustatoisto '-ominaisuus, jonka arvoksi on asetettu ' ei-toistoa ' näyttää kuvan ei-toistuvana.
- ' asema ', koska se asettaa kuvan absoluuttisesti suhteessa sen emoelementtiin.
- ' alkuun ”-ominaisuus asettaa kuvan 100 pikseliksi ylhäältä.
- ' leveys ” -ominaisuutta käytetään div-elementin leveyden asettamiseen 500 pikseliä.
- ' korkeus ” -ominaisuutta käytetään div-elementin korkeuden asettamiseen 300 pikseliä.
- ' animaatio ” on annettu nimellä cloudanimation1.
- ' animaatio-kesto ” edustaa animaation kestoa, joka on 70 sekuntia.
- ' animaatioiden iteraatioiden määrä ” on annettu arvo infinite, joka toistaa animaatiota äärettömästi.
Toistaiseksi olemme käyttäneet CSS-ominaisuuksia div-luokan pääsivulle ja cloud1:lle. Nyt seuraavassa osiossa muotoilemme seuraavan div-luokan nimeltä cloud2.
Tyylipilvi2 luokka
.pilvi2 {
taustakuva: url ( / kuvia / cloud.png ) ;
background-size: sisältää;
taustatoisto: ei toistoa;
sijainti: absoluuttinen;
yläreuna: 50px;
leveys: 200px;
korkeus: 300px;
animaatio: cloudanimation2;
animaation kesto: 15s;
animaatioiden iteraatioiden määrä: ääretön;
}
Div-luokkaa cloud2 sovelletaan alla selitetyillä ominaisuuksilla:-
- ' .pilvi2 ' käytetään pääsyyn luokan cloud2:een.
- ' taustakuva ”-ominaisuus on asetettu muotoon url(/images/cloud.png), jossa kuva on kansio, joka sisältää kuvan cloud.png.
- ' taustan kokoinen ” sisältää arvon, joka varmistaa kuvan näkyvyyden.
- ' taustatoisto ”-ominaisuus, jonka arvo on asetettu no-repeat, näyttää kuvan ei-toistona.
- ' asema ', koska se asettaa kuvan absoluuttisesti suhteessa sen emoelementtiin.
- ' alkuun ”-ominaisuus asettaa kuvan 100 pikseliksi ylhäältä.
- ' leveys ” -ominaisuutta käytetään div-elementin leveyden asettamiseen.
- ' korkeus ” -ominaisuutta käytetään div-elementin korkeuden asettamiseen.
- ' animaatio ” on annettu nimellä cloudanimation2.
- ' animaatio-kesto ” edustaa animaation kestoa.
- ' animaatioiden iteraatioiden määrä ” on annettu arvo infinite, joka toistaa animaatiota äärettömästi.
Määritä @keyframes pilvanimaatiolle1
@ avainkehysten pilvanimaatio1 {
to {
vasen: 0px;
}
alkaen {
vasemmalle: 100 % ;
}
}
Pilvi1-div on sidottu alla kuvatulla animaatiolla:-
- ' @keyframes cloudanimation1 ” animaation cloudanimation1 nimeä seuraa avainsana @keyframes, jota käytetään määrittämään siirtymä.
- @keyframes-avainsana määrittää, kuinka animaatio tehdään alusta loppuun pilvikuvissa.
- ' to ' ja ' alkaen ” avainsanat määrittävät, että pilvi1 siirtyy 100 %:sta näytön 0-pikseliin.
Määritä @keyframes pilvanimaatiolle2
@ avainkehysten pilvanimaatio2 {
0 % {
vasemmalle: 0 % ;
}
100 % {
vasemmalle: 100 % ;
}
}
Div-luokka cloud2 liittyy animaatioon, joka selitetään alla:-
- ' @keyframes cloudanimation2 ” edustaa animaation nimeä cloudanimation2 ja sen jälkeen avainsanaa @keyframes, jota käytetään määrittämään animaatio.
- ' 0 % ' ja ' 100 % ” edustavat animaation alkua ja loppua.
- 0 %:ssa animaatiosta pilvi olisi vasemmalla ja arvoksi asetettu 0 %, ja se siirtyy vähitellen 100 %:iin leveydestä.
Lähtö
Hyvä juttu! Olemme keskustelleet siitä, kuinka voimme määrittää elementeille animaation onnistuneesti avainsanalla @keyframes.Johtopäätös
CSS:n avulla voimme soveltaa tyylejä HTML-elementteihin. CSS-animaatio suorittaa siirtymiä tyylistä toiseen. Se koostuu kahdesta osasta, animaatiotyyleistä ja avainkehyksestä. Animaatiotyylit edustavat erilaisia ominaisuuksia, kuten niiden nimeä, animaation kestoa, animaation iteraatioiden määrää ja paljon muuta. Avainkehyskomponentti määrittää animaation alun ja lopun. Tässä oppaassa esiteltiin animaatioavainkehysten määrittäminen esimerkkien avulla.
- Lisää