CSS Keyframe -animaatioiden luominen

CSS Keyframe -animaatioiden luominen

CSS antaa kehittäjille mahdollisuuden herättää verkkosivunsa henkiin avainkehysten animaation avulla.





CSS -animaatio saavutetaan muuttamalla HTML -elementin alkutilaa sen eri ominaisuuksien avulla. Joitakin yleisiä animoitavia CSS -ominaisuuksia ovat:



ytimen virran virhe Windows 10
  • Leveys
  • Korkeus
  • Sijainti
  • Väri
  • Peittävyys

Nämä yleiset CSS -ominaisuudet käsitellään tietyillä CSS -elementeillä halutun tuloksen luomiseksi. Jos olet koskaan törmännyt animoituun elementtiin verkkosivulla, on todennäköistä, että elementti on animoitu avainkehysten animaatiolla.





Mikä on avainkehyselementti?

The avainkehysten elementti voidaan käyttää yhdessä tai useammassa HTML -elementissä, johon sillä on pääsy. Se tunnistaa tietyn pisteen elementin tilassa ja sanelee elementin ulkonäön tällä hetkellä.

Tämä saattaa kuulostaa paljon sulateltavalta, mutta se on itse asiassa melko yksinkertainen. The avainkehysten elementti on melko yksinkertainen rakenne, joka on helposti ymmärrettävissä ja mukautettavissa animaatiovaatimusten mukaan.



Esimerkki avainkehysten rakenteesta


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Oletetaan, että haluat animoida vihreän suorakulmaisen painikkeen kääntämällä sen siniseksi pyöreäksi painikkeeksi.

Parametrien sisällä alkaen yllä olevassa osassa sinun on asetettava kaikki tarvittavat tyylit, jotta elementti näyttää vihreältä suorakulmaiselta painikkeelta, ja sitten kohteeseen -osiossa, asetat kaikki muotoiluvaatimukset tämän painikkeen muuttamiseksi siniseksi pyöreäksi painikkeeksi.



Jos ajattelet, se ei kuulosta liikaa animaatiolta. Tämä johtuu siitä, että koko tämän prosessin keskeinen osa on vielä esittelemätön --- tämä komponentti on animaatio-ominaisuus.

Animaatio -ominaisuus

The animaatio -ominaisuus on joukko erilaisia ​​aliominaisuuksia; näitä käytetään yhdessä yllä olevan avainkehyksen rakenteen kanssa animoidaksesi halutun HTML -elementin.



Sinun on kuitenkin tiedettävä vain viisi näistä aliominaisuuksista ja niihin liittyvät arvot saavuttaaksesi animaation projekteissasi. Nämä ominaisuudet tunnetaan nimellä:

  • Animaation nimi
  • Animaation kesto
  • Animaatio-ajoitus-toiminto
  • Animaatio-viive
  • Animaatio-iterointi-määrä

Animaation käyttäminen verkkosivulla

Yllä olevan skenaarion avulla tavoitteena on luoda animoitu painike.

Esimerkki painikkeiden animaatiosta







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Yllä olevan koodin animaatio-osa sisältää viisi aiemmin mainittua aliominaisuutta. Jokaisella omaisuudella on hyvin erilainen toiminto, ja yhdessä ne animoivat minkä tahansa HTML -elementin, johon ne on kohdistettu.

Aiheeseen liittyviä: Kuinka kohdistaa osa verkkosivusta CSS -valitsimien avulla

Animaation nimi -ominaisuus

Tämä ominaisuus on luettelon tärkein yksittäinen ominaisuus. Ilman animaation nimi -ominaisuus , sinulla ei ole tunnistetta, jonka voit ohittaa avainkehysten elementti , jolloin kaikki parametreissa olevat koodit ovat hyödyttömiä.

Jos unohdit sisällyttää yhden tai kaksi muuta aliominaisuutta, sinulla voi silti olla melko kunnollinen animaatio. Jos kuitenkin unohdit animaation nimi -ominaisuus sinulla ei olisi animaatiota.

Animaation kesto-ominaisuus

Tätä ominaisuutta käytetään määrittämään, kuinka kauan animoitu elementti kestää siirtyessään tilasta toiseen.

Yllä olevassa esimerkissä animaation keston omaisuus on asetettu 5 sekunniksi (5 s), joten vihreällä suorakulmaisella painikkeella on yhteensä 5 sekuntia, ennen kuin siitä tulee kokonaan sininen pyöreä painike.

Animaation viive -ominaisuus

Tämä ominaisuus on tärkeä yhdestä syystä; joidenkin verkkosivujen latautuminen voi kestää muutaman sekunnin (useiden eri tekijöiden vuoksi). Joten animaation viive -ominaisuus estää animaation käynnistymisen heti siltä varalta, että verkkosivun lataaminen kestää jonkin aikaa.

Yllä olevassa esimerkissä animaation viive -ominaisuus on asetettu arvoon 4s, mikä tarkoittaa, että animaatio alkaa vasta 4 sekunnin kuluttua verkkosivun vierailusta (antaa verkkosivulle tarpeeksi aikaa ladata ennen animaation alkamista).

Animaatio-iterointi-count -ominaisuus

Tämä ominaisuus ilmoittaa, kuinka monta kertaa animoidun elementin pitäisi siirtyä tilasta toiseen. The animaatio-iterointi-count -ominaisuus ottaa arvoja, jotka ovat sanoja ja numeroita. Numeroarvo voi olla mikä tahansa yhdestä ylöspäin, kun taas sanan arvo on yleensä ääretön .

Yllä olevassa esimerkissä animaatio-iterointi-count -arvo on asetettu ääretön , mikä tarkoittaa, että niin kauan kuin verkkosivu on ylöspäin, painikeominaisuus animoi tilasta toiseen jatkuvasti.

Animaatio-ajoitus-toiminto Ominaisuus

Tämä ominaisuus sanelee animoidun elementin liikkeen sen siirtyessä tilasta toiseen. The animaatio-ajoitus-toiminto -ominaisuus annetaan yleensä yksi kolmesta helppousarvosta.

  • Helppokäyttöisyys
  • Helppokäyttöisyys
  • Helppo sisään-ulos

The helppokäyttöinen arvo käytetään edellä; tämä siirtää hitaasti animaation tilasta toiseen. Jos tavoitteena on luoda hidas siirtyminen, kun painike muuttuu vihreästä suorakulmiosta siniseksi ympyräksi, käytä helppokäyttöinen arvo . Jos haluat vain hitaan siirtymisen vastakkaiseen suuntaan, käytä helpotusarvo .

Koodin pienentäminen

Useimmissa tapauksissa ohjelman keston lyhentämistä pidetään käytännön lähestymistapana. Tämä johtuu pääasiassa siitä, että vähemmän koodirivejä vähentää todennäköisyyttä, että ohjelmasi huomaamatta jäävät virheet.

Yllä olevaa koodia voidaan pienentää neljällä rivillä. Tämä voidaan saavuttaa yksinkertaisesti käyttämällä animaatio-ominaisuutta yksilöimättä erikseen sen aliominaisuuksia.

Esimerkki painikeanimaation koodin pienentämisestä







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}