Kuidas luua CSS võtmekaadri animatsioone

Kuidas luua CSS võtmekaadri animatsioone

CSS annab arendajatele võimaluse oma veebilehti võtmekaadrite animatsiooni abil ellu äratada.





CSS -animatsioon saavutatakse HTML -elemendi algseisundi muutmisega selle erinevate omaduste kaudu. Mõned üldised CSS -i omadused, mida saab animeerida, on järgmised.



kuidas teha Facebookis fotokollaaže
  • Laius
  • Kõrgus
  • Asend
  • Värv
  • Läbipaistmatus

Neid üldisi CSS -i omadusi manipuleerivad kindlad CSS -elemendid soovitud tulemuse loomiseks. Kui olete kunagi veebilehel kohanud animeeritud elementi, on tõenäoline, et element on animeeritud võtmekaadrite animatsiooni abil.





Mis on võtmekaadrite element?

The võtmekaadrite element saab kasutada ühel või mitmel HTML -elemendil, millele tal on juurdepääs. See tuvastab konkreetse punkti elemendi olekus ja määrab selle elemendi välimuse.

See võib tunduda palju seeditav, kuid tegelikult on see üsna lihtne. The võtmekaadrite element sellel on üsna lihtne struktuur, mida saab hõlpsasti mõista ja kohandada mis tahes animatsiooninõuetele vastavaks.



Võtmekaadrite struktuuri näide


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

Oletame, et soovite animeerida rohelist ristkülikukujulist nuppu, muutes selle siniseks ümmarguseks nupuks.

Parameetrite piires alates ülaltoodud jaotises peate paigutama kõik vajalikud stiilid, et element näeks välja nagu roheline ristkülikukujuline nupp, seejärel et jaotises esitate kõik stiilinõuded, et muuta see nupp siniseks ümmarguseks nupuks.



Kui mõtlete, ei kõla see liiga palju nagu animatsioon. See on sellepärast, et kogu selle protsessi põhikomponenti tuleb veel tutvustada-see komponent on animatsiooni omadus.

Animatsiooni atribuut

The animatsiooni omadus omab komplekti erinevaid alamomadusi; neid kasutatakse koos ülaltoodud võtmekaadrite struktuuriga soovitud HTML -elemendi animeerimiseks.



Oma projektides animatsiooni saavutamiseks peate aga teadma ainult viit neist alamomadustest ja nendega seotud väärtustest. Neid omadusi tuntakse järgmiselt:

  • Animatsiooni nimi
  • Animatsiooni kestus
  • Animatsiooni ajastamise funktsioon
  • Animatsioon-viivitus
  • Animatsioonide ja iteratsioonide arv

Animatsiooni kasutamine veebilehel

Ülaltoodud stsenaariumi kasutades on eesmärk luua animeeritud nupp.

Nuppude animatsiooni näide







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!


Ülaltoodud koodi animatsiooni jaotis sisaldab viit alamatribuuti, mida varem mainiti. Igal atribuudil on väga erinev funktsioon ja koos töötavad nad animeerimiseks mis tahes HTML -elementi, mida nad sihtimiseks on loodud.

Seotud: Kuidas veebisaidi osa sihtida CSS -i valijate abil

Animatsiooni nimega atribuut

See vara on nimekirja kõige olulisem vara. Ilma animatsiooni nimega atribuut , poleks teil ühtegi identifikaatorit, mille juurde saata võtmekaadrite element , muutes kogu parameetrites oleva koodi kasutuks.

Kui unustasite lisada ühe või kaks alamatribuuti, võib teil siiski olla üsna korralik animatsioon. Kui aga unustasite animatsiooni nimega atribuut teil poleks animatsiooni.

Animatsiooni kestusega atribuut

Selle atribuudi abil saab määrata aja, mis animeeritud elemendil peaks ühest olekust teise üleminekul kuluma.

Ülaltoodud näites on animatsiooni kestusega atribuut on seatud 5 sekundiks (5 s), seega on rohelisel ristkülikukujulisel nupul aega kokku 5 sekundit, enne kui see muutub täielikult siniseks ümmarguseks nupuks.

Atribuut Animation-delay

See vara on oluline ühel põhjusel; mõne veebilehe täielik laadimine võib võtta mitu sekundit (mitme erineva teguri tõttu). Seega animatsiooni viivituse omadus takistab animatsiooni kohest käivitamist juhuks, kui veebilehe laadimine võtab veidi aega.

Ülaltoodud näites on animatsiooni viivituse omadus on seatud väärtusele 4s, mis tähendab, et animatsioon algab alles 4 sekundit pärast veebilehe külastamist (andes veebilehele piisavalt aega enne animatsiooni algust).

Animatsiooni-iteratsioonide loendamise vara

See atribuut näitab, mitu korda peaks animeeritud element ühest olekust teise üle minema. The animatsiooni-iteratsiooni loendamise omadus võtab väärtusi, mis on sõnad ja numbrid. Numbri väärtus võib olla ükskõik milline 1 -st ülespoole, samas kui sõna väärtus on tavaliselt lõpmatu .

Ülaltoodud näites on animatsiooni-iteratsiooni-arvu väärtus on seatud lõpmatu , mis tähendab, et seni, kuni veebileht on üleval, animeerib atribuut pidevalt ühest olekust teise.

Animatsiooni ajastamise funktsiooni atribuut

See omadus dikteerib animeeritud elemendi liikumist ühest olekust teise üleminekul. The animatsiooni ajastamise funktsiooni omadus tavaliselt määratakse üks kolmest lihtsusväärtusest.

  • Lihtsus
  • Lihtsus
  • Lihtne sisse-välja

The lihtsus-in-out väärtus kasutatakse ülalpool; see viib animatsiooni aeglaselt ühest olekust teise. Kui eesmärk on luua aeglane üleminek, kui nupp muutub rohelisest ristkülikust siniseks ringiks, kasutaksite lihtsuse väärtus . Kui soovite ainult aeglast üleminekut vastupidises suunas, kasutaksite kergendusväärtus .

Meie koodeksi vähendamine

Enamikul juhtudel peetakse programmi pikkuse lühendamist praktiliseks lähenemisviisiks. Seda peamiselt seetõttu, et vähem koodiridu vähendab vigade tõenäosust teie programmides märkamatuks jääda.

Ülaltoodud koodi saab vähendada nelja rea ​​võrra. Seda on võimalik saavutada, kasutades lihtsalt animatsiooni atribuuti ilma iga selle alamatribuuti selgesõnaliselt identifitseerimata.

Nuppude animatsiooni näite koodi vähendamine







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;
}
}