Verkkosivun animaatiot voivat houkutella lisää käyttäjiä. Kysy itseltäsi - jos haluat nähdä verkkosivun, jossa on melko vähän animaatiota, etkö halua tutkia lisää? CSS-siirtymien avulla voit herättää työsi eloon hienojen animaatioiden avulla. Ja nämä on tehtävä oikein. Tutkitaan CSS-siirtymien maailmaa seuraavassa järjestyksessä:
- Miksi CSS-siirtymät?
- Siirtymisominaisuus
- Mitä sinun on määritettävä?
- Siirtymäajastustoiminto Toiminto-ominaisuus
- Siirtymisviive-ominaisuus
Miksi CSS-siirtymät?
Otetaan esimerkki. Jos vaihdat elementin värin valkoisesta siniseksi, tämä muutos on melkein välitön. Animoidumman vaikutelman saamiseksi voit tehdä tämän muutoksen asteittain. Tämä näyttää myös visuaalisesti houkuttelevalta. Ottamalla CSS-siirtymät käyttöön voit mukauttaa tapaa, jolla muutokset tapahtuvat. Voit määrittää, miten elementtien muutokset tapahtuvat tietyin aikavälein, jotka seuraavat kiihtyvyyskäyrää.
CSS-siirtymien avulla voit määrittää muutokset elementit, tietyt aikavälit, kiihtyvyyskäyrän nopeus ja paljon muuta. Voit tehdä kaiken tämän ilman Flash- tai JavaScript .
Paremman käsityksen saamiseksi voit viitata alla olevaan kuvaan:
Yllä olevassa kuvassa HTML-elementti muuttuu punaisesta siniseksi muutamassa sekunnissa. Näet myös välivärin, kun siirtyminen tapahtuu. Jos et aio käyttää CSS-siirtymiä, huomaat, että värin muutos punaisesta siniseksi on välitöntä - et näe väliväriä. CSS-siirtymien yhteydessä huomaat animoidun vaikutuksen, kun HTML-elementit muuttuvat vanhasta tilasta uuteen.
Siirtymisominaisuus
Voit käyttää lyhennemuutosominaisuutta CSS-siirtymien hallintaan. Tämän lyhenteen käyttö ei ole vain helppoa, mutta se voi myös välttää synkronoinnin ulkopuoliset parametrit, jotka voivat olla melko turhauttavia CSS: n virheenkorjauksessa.
kuinka kääntää kaksinkertainen int
Siirtymisominaisuus määrittää CSS-ominaisuudet, joihin haluat siirtymävaikutuksen. Vain nämä CSS-ominaisuudet ovat animoituja.
Syntaksi:
siirtyminen:
Aloittelijana saatat joutua kohtaamaan vaikeuksia lyhenteen käyttämisessä. Jos luulet, että lyhenteen käyttäminen on sinulle nyt hieman monimutkaista, voit määrittää siirtymäominaisuudet erikseen. HTML-elementille voit määrittää siirtymäominaisuudet yksitellen alla olevan esimerkin mukaisesti:
div {leveys: 100 kuvapisteen korkeus: 100 kuvapisteen tausta: vaaleansininen siirtymäominaisuus: leveys siirtymän kesto: 2 sekunnin siirtymäajastustoiminto: lineaarinen siirtoviive: 1 s} div: hiiren osoitin {leveys: 300 kuvapistettä}Vie hiiri laatikon päälle
Edellä olevassa esimerkissä olemme määrittäneet ominaisuudet (siirtymisominaisuus, siirtymän kesto, siirtymäajastustoiminto ja siirtoviive) ja niiden arvot erikseen. Opimme näistä siirtymäominaisuuksista pian.
Mitä sinun on määritettävä?
CSS-siirtymien luomiseksi sinun on määritettävä ensisijaisesti kaksi asiaa: CSS-ominaisuus, johon haluat lisätä vaikutuksen, ja vaikutuksen kesto.Sinun on pidettävä mielessä yksi asia - kun et määritä ajan kestoa, siirtymän oletusarvo on 0 , eikä sillä ole vaikutusta.
Tarkastellaan esimerkkiä:
Alla oleva koodi määrittelee leveysominaisuuden siirtymävaikutuksen viiden sekunnin ajaksi.
div {leveys: 100px korkeus: 100px tausta: sininen siirtymä: leveys 5s} div: hover {leveys: 600px}Siirrä kohdistin yllä olevan div-elementin päälle nähdäksesi siirtymävaiheen.
Yllä olevassa koodissa näet, että kun viet hiiren osoittimen sinisen laatikon päälle, sininen ruutu lisää sen leveyttä vähitellen viiden sekunnin ajan. Huomaa myös, että kun poistat kohdistimen sinisestä ruudusta, sininen ruutu palaa alkuperäiseen kokoonsa vähitellen (ei heti). Voit myös muuttaa leveyden ja keston arvoja nähdäksesi, miten tämä siirtymäominaisuus vaikuttaa HTML-elementtiin.
Voit myös lisätä siirtymätehosteen useampaan kuin yhteen ominaisuuteen. Voit tehdä sen erottamalla ominaisuudet pilkuilla. Tarkastellaan esimerkkiä:
Alla olevassa koodissa siirtymisominaisuus määritetään leveydelle, korkeudelle ja muunnokselle.
div {täyte: 15px leveys: 150px korkeus: 100px tausta: vihreä siirtymä: leveys 2s, korkeus 2s, muunnos 2s} div: hover {leveys: 300px korkeus: 200px muunnos: kiertää (360deg)} Hei maailma (Vie hiiri minuun)
Yllä olevan esimerkin avulla näet, kuinka vihreä laatikko liikkuu, kun viet hiiren kentän päälle.
Olemme määrittäneet vain ominaisuuden ja keston. Katsotaanpa muut parametrit, joissa on useita esimerkkejä.
Siirtymäajastustoiminto Toiminto-ominaisuus
Tämä ominaisuus määrittelee siirtymävaikutuksen nopeuskäyrän. Se voi ottaa seuraavat arvot:
- Helppo arvo: Tämä on oletusarvo, jossa vaikutus on alussa hidas, sitten nopeampi ja päättyy hitaasti.
- Lineaarinen arvo: Tämä vaikutus ei muuta siirtymän nopeutta - se pitää nopeuden tasaisena alusta loppuun.
- Helppokäyttöinen arvo: Tämä vaikutus alkaa hitaasti.
- Poistumisarvo: Tällä vaikutuksella on hidas loppu.
- Helppo sisään-ulos -arvo: Tällä vaikutuksella on hidas alku sekä hidas loppu.
- Kuutiokohdan arvo (n, n, n, n): Voit määrittää omat arvosi kuutio-bezier-toiminnossa.
Alla oleva koodi näyttää siirtymävaikutukset lineaarisille, helppouden, helpon sisään, helpon ulos ja helpon sisään-ulos -arvoille.
div {leveys: 100px korkeus: 100px tausta: vaaleanpunainen siirtymä: leveys 2s} # div1 {siirtymäajastustoiminto: lineaarinen} # div2 {siirtymäajastustoiminto: helppous} # div3 {siirtymäajastustoiminto: helppous } # div4 {siirtymisaikatoiminto: helppous-ulos} # div5 {siirtymäajastustoiminto: helppous-ulos-ulos} div: hover {leveys: 300px}Vie hiiri alla olevien div-elementtien päälle
lineaarinen
helppous
helppous
helppous
helppous sisään-ulos
Siirtymisviive-ominaisuus
Joskus haluat, että animaatio tapahtuu tietyn ajan kuluttua. Siirtoviive-ominaisuuden avulla voit määrittää siirtymätehosteen viiveen. Voit määrittää viiveen sekunneissa.
Otetaan esimerkki siirtymävaikutuksen viivästymisestä:
div {leveys: 100px korkeus: 100px tausta: keltainen siirtymä: width 3s siirtoviive: 1s} div: hover {width: 300px}Vie hiiri alla olevan div-elementin päälle
Huomautus: Voit havaita yhden sekunnin viiveen ennen vaikutuksen alkamista
mikä on funktio sql: ssä
Yllä olevassa koodissa, kun viet hiiren osoittimen keltaisen ruudun päälle, huomaat (yhden sekunnin ajan), että vaikutusta ei ole. Yhden sekunnin odotuksen jälkeen huomaat vaikutuksen.
Tämän avulla olemme päässeet tämän CSS Transitions -artikkelin loppuun. Voit lisätä animaatioita verkkosivuillesi nyt. Kokeile näitä esimerkkejä.
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 CSS Transition -blogin kommenttiosassa ja palaamme sinuun.