Tämä artikkeli esittelee monivaiheisten animaatioiden ja siirtymien lisäämisprosessin.
Kuinka käyttää monivaiheisia animaatioita ja siirtymiä?
Monivaiheisen animaation tekemiseksi luodaan sarja avainkehyksiä. Se määrittää valittuun HTML-elementtiin sovellettavan muutossarjan. Jokainen avainkehys edustaa animaation eri tilaa, ja selain siirtää elementin sujuvasti näiden tilojen välillä. Määritä siirtymien aikana CSS-ominaisuuksien sujuva muutos tietyn ajan kuluessa käyttäjän vuorovaikutusten tai tilan muutosten mukaan.
Käydään läpi käytännön esimerkki ymmärtääksemme paremmin:
Esimerkki 1: Monivaiheisen animaation käyttäminen
Tässä esimerkissä monivaiheista animaatiota sovelletaan valittuun HTML-elementtiin. Vieraile alla olevassa esittelyssä:
< tyyli >
.animationExample {
leveys: 130px;
korkeus: 130px;
taustaväri: metsänvihreä;
asema: suhteellinen;
animaatio: moveAnimate 4s easy-in-out ääretön;
}
< / tyyli >
< kehon >
< div luokkaa = 'animaatioesimerkki' >< / div >
< / kehon >
Yllä olevassa koodinpätkässä:
- Ensin luokka nimeltä ' animaatioesimerkki ' on valittu '
' -tunniste. - Seuraavaksi arvot ' 130 pikseliä ' on määritetty ' korkeus ' ja ' leveys ” ominaisuuksia.
- Lisäksi aseta ' metsänvihreä ' ja ' suhteellinen ' arvona ' taustaväri ' ja ' asema ”-ominaisuuksia visualisoinnin parantamiseksi.
- Käytä sen jälkeen ' animaatio '-ominaisuutta ja aseta se yhtä suureksi kuin ' moveAnimate 4s helpottaa sisään ja ulos loputtomasti ”, jos haluat käyttää animaatioita.
- Arvo koostuu neljästä osasta, joista ensimmäinen on mukautetun nimen animaatio, toinen on valmistumisaika, kolmas on animaation tyyppi ja neljäs on raja, kuinka monta kertaa tätä animaatiota käytetään.
- Luo lopuksi HTML-elementti ja määritä ' animaatioesimerkki ”luokka siihen.
Käytä nyt ' avainkehykset 'sääntö mukautetun määrittämiseksi' liiku Animoi ”animaatio:
@ siirtää Animoi avainkehykset {0 % {
vasemmalle: 0 ;
taustaväri: sininen;
}
viisikymmentä % {
vasen: 200px;
taustaväri: metsänvihreä;
muunnos: kierrä ( 180 astetta ) ;
}
100 % {
vasemmalle: 0 ;
taustaväri: sininen;
}
}
Yllä olevassa koodilohkossa:
- Ensinnäkin ' @keyframes ” -lohko luodaan yhdessä määritettävän mukautetun animaation nimen kanssa.
- Luo seuraavaksi lohko nimeltä ' 0 % ”, joka käyttää CSS-tyylejä animaation alussa. Ja käytä ' taustaväri ' ja ' vasemmalle ” CSS-ominaisuudet.
- Luo nyt lohko nimeltä ja ' viisikymmentä% ” tyyliin animaation keskellä. Se tarjoaa arvot ' 200 pikseliä ”, “ metsänvihreä ' ja ' pyöritä (180 astetta) ' 'vasemmalle', 'taustavärille' ja 'muunnos' -ominaisuuksille. Tämä sallii valitun elementin kiertää vasemmalle 200 pikseliä.
Yllä olevan koodilohkon kääntämisen jälkeen:
Tulos näyttää, että valittuun HTML-elementtiin on lisätty monivaiheinen animaatio.
Esimerkki 2: Monivaiheisen siirtymän käyttäminen
Monivaiheisen siirtymän soveltamiseksi voidaan käyttää CSS-valitsimia yhdessä ' siirtyminen ” omaisuutta. Käy alla olevassa koodissa:
.fade {
opasiteetti: 1;
siirtymä: opasiteetti 1s;
}
.fade:hover {
opasiteetti: 0;
}
<
/ tyyli>
<
runko>
< s luokkaa = 'haalistua' > Vie hiiri päälleni nähdäksesi siirtymän. < / s >
< / kehon >
Yllä olevan koodin selitys:
- Ensinnäkin mukautettu ' haalistua ' luokka valitaan ja arvo 1 annetaan ' opasiteetti ” omaisuutta. Aseta myös arvo opasiteetti 1s ' kohtaan ' siirtyminen ”CSS-ominaisuus. Tämä asettaa tai poistaa peittävyyden ' 1s ”.
- Seuraavaksi ' :hover ' -valitsin on määritetty ' haalistua ”luokka. Siinä arvo ' 0 ” on asetettu peittävyysominaisuuteen.
- Lopulta HTML-elementti luodaan ' '-tunniste ja 'luokka' haalistua ' on liitetty siihen.
Kokoamisvaiheen päätyttyä verkkosivu näyttää tältä:
GIF näyttää, että mukautettua häivytyssiirtymää on käytetty valittuun HTML-elementtiin.
Johtopäätös
Monivaiheiset animaatiot ja siirtymät elävöittävät HTML-verkkosivuja lisäämällä liikettä ja visuaalisia tehosteita. Animaatiossa ' avainkehykset ' käytetään yhdessä kestoprosenttiosuuden kanssa, kuten ' 0 % 'on alku,' viisikymmentä% ' on keskiosa ja ' 100 % ” on animaation keston loppu. Siirtymiseen voidaan käyttää CSS-valitsinta yhdessä ' siirtyminen ”luokka. Tämä artikkeli on osoittanut monivaiheisten animaatioiden ja siirtymien käyttöprosessin.