Tämä artikkeli näyttää käytännön esittelyn useiden CSS-animaatioiden toistamisesta/lisäämisestä samanaikaisesti.
Kuinka pelata useita CSS-animaatioita samaan aikaan?
Käyttämällä useita CSS-animaatioita samanaikaisesti, kehittäjät voivat helposti luoda kiinnostavampia käyttöliittymiä. Jos haluat toistaa useita CSS-animaatioita samanaikaisesti, anna jokaiselle yksilöllinen nimi ja käytä niitä samoissa tai erillisissä osissa sivulla.
Noudata alla olevia ohjeita toistaaksesi/lisäksesi useamman kuin yhden animaation samanaikaisesti.
Vaihe 1: Rakenteen luominen
Luo ensin HTML-elementti, jossa animaatioita käytetään tulevissa vaiheissa. Esimerkiksi kuva lisätään:
< div luokkaa = 'span' >
< img src = 'kirja.jpg' korkeus = '100px' leveys = '100px' luokkaa = 'animoida' >
< / div >
Yllä olevassa koodinpätkässä:
- Ensin kuvapoluksi asetetaan ' src ”-attribuutti.
- Seuraavaksi arvo ' 100 pikseliä ' tarjotaan CSS:n 'width'- ja 'height'-ominaisuuksille.
- Aseta myös arvo animoida ' kohtaan ' luokkaa ”-attribuutti.
Vaihe 2: Animaatioiden määrittäminen
' avainkehykset ” käytetään luomaan mukautettuja animaatioita verkkosivun tarpeiden mukaan. Esimerkiksi alla olevaan koodinpätkään luodaan kaksi animaatiota:
@-webkit-keyframes pyörii {100 % {
muunnos: kierrä ( 180 astetta ) ;
}
}
@-webkit-keyframes-asteikko {
100 % {
muunnos: scaleX ( 1 ) mittakaavaY ( 1 ) ;
}
}
Yllä olevassa koodinpätkässä:
- Ensinnäkin ' @-webkit-keyframes ' mekanismia käytetään perustamiseen' pyöritä ' ja ' kiertää ”-nimiset animaatiot.
- Käytä seuraavaksi ' muuttaa 'omaisuus, jonka arvo on ' kiertää() ' kohdassa ' pyöritä ”animaatiorunko. Tämä toiminto pyörittää elementtiä kulmassa 180 astetta ”.
- Aseta sen jälkeen animaatio, joka kasvattaa tai laajentaa alkuperäistä elementtiä kertoimella ' 1 ' molemmissa ' X ' ja ' JA '-akselilla ' mittakaavassa ”animaatiorunko.
Vaihe 3: Animaatioiden käyttäminen HTML-elementeissä
Valitse CSS-osiosta luokka ' animoida ', joka on määritetty ' ”-tunniste ja anna seuraavat CSS-ominaisuudet:
sijainti: absoluuttinen;
vasemmalle: 60 %;
leveys : 110px;
korkeus : 110px;
marginaali: -40px 0 0 -40px;
-webkit-animaatio: asteikko 3s ääretön lineaarinen;
-webkit-animaatio: spin 2s ääretön lineaarinen;
}
Kuvaus yllä olevassa koodilohkossa käytetyistä ominaisuuksista:
- Aseta ensin arvo ' ehdoton 'CSS:ään' asema ” omaisuutta. Se kohdistaa ' img ”elementti animaation mukaan.
- Anna sitten arvot ' 60 % ”, “ 110 pikseliä ' ja ' 110 pikseliä 'CSS:ään' vasemmalle ”, “ leveys ' ja ' korkeus ” ominaisuuksia. Näitä ominaisuuksia käytetään elementin sijainnin ja koon asettamiseen.
- Aseta sen jälkeen arvo ' asteikko 3s ääretön lineaarinen ' kohtaan ' -webkit-animaatio ”CSS-ominaisuus.
- Ja ' 3s ' on animaation kesto, ' ääretön ' on animaation kesto ja ' lineaarinen ” on animaation suunta.
- Anna lopuksi arvot ' spin 2s ääretön lineaarinen 'CSS:ään' -webkit-animaatio ” omaisuutta. Tämä ominaisuus lisää toisen animaation nimeltä ' pyöritä ' sivulla ' img ”elementtiä.
Yllä olevan koodilohkon kääntämisen jälkeen animaatio näyttää tältä:
Yllä oleva gif osoittaa, että vain ' pyöritä ” animaatio toistetaan kohdistetulla elementillä.
Vaihe 4: Useiden animaatioiden toistaminen HTML-elementeillä
Kuten yllä olevassa vaiheessa, elementtiin on käytetty vain yhtä animaatiota. Tämä johtuu siitä, että samalle kohteelle on määritetty useita arvoja -webkit-animaatio ” omaisuutta.
Voit ratkaista tämän ongelman käärimällä kohdeelementin toiseen HTML-elementtiin. Kuten ' div ' on jo käytössä kääreenä ensimmäisessä vaiheessa, valitse sen ' jänneväli ' ja päivitä koodi seuraavasti:
.animate {sijainti: absoluuttinen;
vasemmalle: 60 %;
leveys : 110px;
korkeus : 110px;
marginaali: -40px 0 0 -40px;
-webkit-animaatio: asteikko 3s ääretön lineaarinen;
}
. jänneväli {
asema: suhteellinen;
yläreuna: 160px;
-webkit-animaatio: spin 2s ääretön lineaarinen;
}
Yllä olevassa koodissa:
- Aluksi ' animoida 'luokka pysyy samana ja siitä poistetaan vain toinen animaatio, joka sijoitetaan ' jänneväli ”luokka.
- Aseta sen jälkeen sijainti käyttämällä ' asema ' ja ' alkuun ” ominaisuuksia.
Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää nyt tältä:
Tulos näyttää, että molempia animaatioita on käytetty valittuun HTML-elementtiin samanaikaisesti.
Johtopäätös
Jos haluat käyttää useita CSS-ominaisuuksia, kääri elementti HTML-elementeillä ja lisää niihin animaatioita niin, että jokaisessa HTML-elementissä on yksi animaatio. Kun aliominaisuus perii HTML-emoelementissä käytetyn animaation, useita animaatioita käytetään aiheuttamatta virheitä tai epäselvyyttä kääntäjälle. Tämä on menettelytapa useamman kuin yhden CSS-animation toistamiseksi/lisäämiseksi samanaikaisesti.