Acest articol demonstrează procesul de adăugare a animațiilor și tranzițiilor în mai mulți pași.
Cum să utilizați animațiile și tranzițiile în mai mulți pași?
Pentru a realiza o animație în mai mulți pași, se generează o serie de cadre cheie. Specifică seria de modificări care urmează să fie aplicate elementului HTML selectat. Fiecare cadru cheie reprezintă o stare diferită a animației, iar browserul face tranziția fără probleme a elementului între aceste stări. În timpul tranzițiilor, specificați modificarea lină a proprietăților CSS pe o durată specificată prin interacțiunile utilizatorului sau modificări de stare.
Să parcurgem un exemplu practic pentru o mai bună înțelegere:
Exemplul 1: Aplicarea animației în mai mulți pași
În acest exemplu, o animație în mai mulți pași se va aplica elementului HTML selectat. Vizitați demonstrația de mai jos:
< stil >
.animationExample {
latime: 130px;
înălțime: 130px;
culoare de fundal: verde pădure;
poziție: relativă;
animație: moveAnimate 4s ease-in-out infinit;
}
< / stil >
< corp >
< div clasă = „Exemplu de animație” >< / div >
< / corp >
În fragmentul de cod de mai sus:
- În primul rând, clasa numită „ animațieExemplu ” este selectat în interiorul „
' etichetă. - În continuare, valorile lui „ 130px ” sunt atribuite “ înălţime ' și ' lăţime ” proprietăți.
- În plus, setați „ padure verde ' și ' relativ ” ca valoare pentru „ culoare de fundal ' și ' poziţie ” proprietăți pentru a îmbunătăți vizualizarea.
- După aceea, utilizați „ animaţie ” și setați-o egală cu ” moveAnimate 4s se ușurează la infinit ” pentru a aplica animații.
- Valoarea constă din patru părți, prima este animația cu numele personalizat, a doua este durata de timp pentru finalizare, a treia este tipul de animație și a patra este limita de câte ori se va aplica această animație.
- În final, creați un element HTML și atribuiți „ animațieExemplu ” clasa la ea.
Acum, folosiți „ cadre cheie ” regula pentru a defini obiceiul ” moveAnimate ” animație:
@ moveAnimate cadre cheie {0 % {
stânga: 0 ;
culoare de fundal: albastru;
}
cincizeci % {
stânga: 200px;
culoare de fundal: verde pădure;
transforma: roti ( 180 de grade ) ;
}
100 % {
stânga: 0 ;
culoare de fundal: albastru;
}
}
În blocul de cod de mai sus:
- În primul rând, „ @keyframes blocul ” este creat împreună cu numele animației personalizate care urmează să fie definită.
- Apoi, creați un bloc numit „ 0% ” care aplică stiluri CSS la începutul animației. Și utilizați „ culoare de fundal ' și ' stânga ” Proprietăți CSS.
- Acum, creați un bloc numit și „ cincizeci% ” pentru a stila în mijlocul animației. Acesta oferă valorile de „ 200px ”, “ padure verde ' și ' rotire (180 de grade) ” la „stânga”, „culoarea de fundal” și proprietățile „transform”. Acest lucru permite elementului selectat să se rotească la stânga 200px.
După compilarea blocului de cod de mai sus:
Rezultatul arată că animația în mai mulți pași a fost aplicată elementului HTML selectat.
Exemplul 2: Aplicarea tranziției în mai mulți pași
Pentru a aplica tranziția în mai mulți pași, selectoarele CSS pot fi utilizate împreună cu „ tranziție ” proprietate. Accesați codul de mai jos:
.decolorare {
opacitate: 1;
tranziție: opacitate 1s;
}
.fade:hover {
opacitate: 0;
}
<
/ stil>
<
corp>
< p clasă = 'decolorare' > Treceți peste mine pentru a vedea tranziția. < / p >
< / corp >
Explicația codului de mai sus:
- În primul rând, obiceiul „ decolorare ” este selectată și valoarea 1 este furnizată pentru ” opacitate ” proprietate. De asemenea, setați valoarea „ opacitate 1s „la „ tranziție ” Proprietate CSS. Aceasta setează sau elimină opacitatea într-o durată de timp de „ 1s ”.
- În continuare, „ :planare selectorul ” este alocat decolorare ” clasa. În ea, valoarea „ 0 ” este setat la proprietatea opacitate.
- În cele din urmă, elementul HTML este creat în interiorul „
„, și clasa „ decolorare ” este atașat acestuia.
După încheierea fazei de compilare, pagina web apare astfel:
GIF-ul afișează că tranziția de estompare personalizată a fost aplicată elementului HTML selectat.
Concluzie
Animațiile și tranzițiile în mai mulți pași dau viață paginilor web HTML prin adăugarea de mișcare și efecte vizuale. Pentru animație, „ cadre cheie ” sunt utilizate împreună cu procentul de durată, cum ar fi „ 0% ' este începutul ' cincizeci% ' este mijlocul și ' 100% ” este sfârșitul duratei animației. Pentru tranziție, selectorul CSS poate fi folosit împreună cu „ tranziție ” clasa. Acest articol a demonstrat procesul de utilizare a animațiilor și tranzițiilor în mai mulți pași.