Home-theater-designers
CSS oferă dezvoltatorilor posibilitatea de a-și aduce viața paginile web folosind animația cu cadre cheie.
Animația CSS se realizează prin modificarea stării inițiale a unui element HTML prin diferitele sale proprietăți. Unele proprietăți CSS generale care pot fi animate includ:
cum se descarcă un întreg site web pentru vizualizare offline
- Lăţime
- Înălţime
- Poziţie
- Culoare
- Opacitate
Aceste proprietăți CSS generale sunt manipulate de elemente CSS specifice pentru a crea rezultatul dorit. Dacă ați întâlnit vreodată un element animat pe o pagină web, este posibil ca elementul să fie animat folosind animație cu cadre cheie.
Ce este un element al cadrelor cheie?
The element keyframes poate fi folosit pe unul sau mai multe elemente HTML la care are acces. Identifică un punct specific în starea unui element și dictează aspectul pe care acest element trebuie să îl aibă în acest moment.
S-ar putea să pară mult de digerat, dar este de fapt destul de simplu. The element keyframes are o structură destul de simplă, care poate fi ușor înțeleasă și ajustată pentru a se potrivi oricăror cerințe de animație.
Exemplu de structură a cadrelor cheie
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Să presupunem că doriți să animați un buton dreptunghiular verde transformându-l într-un buton rotund albastru.
În cadrul parametrilor din secțiunea de mai sus va trebui să plasați tot stilul necesar pentru ca elementul să arate ca un buton dreptunghiular verde, apoi în la secțiunea, veți plasa toate cerințele de stil pentru a transforma acest buton într-un buton rotund albastru.
Dacă te gândești, nu sună prea mult ca animație. Ei bine, asta pentru că încă nu a fost introdusă o componentă cheie a întregului proces --- această componentă este proprietatea animației.
Proprietatea de animație
The proprietate de animație are un set de sub-proprietăți diferite; acestea sunt utilizate în combinație cu structura cadrelor cheie de mai sus pentru a anima elementul HTML dorit.
Cu toate acestea, trebuie doar să cunoașteți cinci dintre aceste proprietăți secundare și valorile asociate acestora, pentru a realiza animație în proiectele dvs. Aceste proprietăți sunt cunoscute ca:
- Numele animației
- Durata animației
- Funcția de temporizare-animație
- Animare-întârziere
- Animație-iterație-număr
Utilizarea animației pe o pagină web
Folosind scenariul de mai sus, scopul este crearea unui buton animat.
Exemplu de animație buton
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!
Secțiunea de animație a codului de mai sus conține cele cinci proprietăți secundare menționate anterior. Fiecare proprietate are o funcție foarte distinctă și împreună lucrează pentru a anima orice element HTML pe care sunt concepute să le vizeze.
În legătură: Cum să vizați o parte a unei pagini web utilizând selectoare CSS
Proprietatea Animation-name
Această proprietate este cea mai importantă proprietate din listă. Fara proprietate nume-animație , nu ați avea niciun identificator pentru a trece la element keyframes , făcând inutil tot codul din parametrii săi.
Dacă ați uitat să includeți una sau două dintre celelalte sub-proprietăți, atunci s-ar putea să aveți o animație destul de decentă. Cu toate acestea, dacă ați uitat proprietate nume-animație nu ai avea nicio animație.
Proprietatea Animation-duration
Această proprietate este utilizată pentru a defini cantitatea de timp pe care ar trebui să o ia un element animat la trecerea de la o stare la alta.
În exemplul de mai sus, proprietate de animație-durată este setat la 5 secunde (5s), astfel încât butonul verde dreptunghiular va avea un total de 5 secunde înainte ca acesta să devină complet buton rotund albastru.
Proprietatea Animation-delay
Această proprietate este importantă dintr-un singur motiv; unele pagini web ar putea dura câteva secunde pentru a se încărca complet (din cauza mai multor factori diferiți). Asa ca proprietate animatie-intarziere împiedică pornirea imediată a animației doar în cazul în care pagina web are nevoie de ceva timp pentru încărcare.
În exemplul de mai sus, proprietate animatie-intarziere este setat la 4s, ceea ce înseamnă că animația nu va începe decât la 4 secunde după ce pagina web este vizitată (acordând paginii web suficient timp pentru a se încărca înainte de a începe animația).
Proprietatea Animation-iteration-count
Această proprietate indică de câte ori elementul animat ar trebui să treacă de la o stare la alta. The proprietate de animație-iterație-numărare ia valori care sunt cuvinte și numere. Valoarea numerică poate fi de la 1 în sus, în timp ce valoarea cuvântului este de obicei infinit .
În exemplul de mai sus, valoare animație-iterație-număr este setat sa infinit , ceea ce înseamnă că, atâta timp cât pagina web este sus, proprietatea butonului se va anima de la o stare la alta, continuu.
Proprietatea de funcție Animation-timing
Această proprietate dictează mișcarea elementului animat pe măsură ce trece de la o stare la alta. The proprietatea funcției de temporizare-animație i se atribuie de obicei una dintre cele trei valori de ușurință.
- Ușor
- Ușurarea
- Usurinta-in-iesire
The valoare ușurință în intrare este folosit mai sus; aceasta trece încet animația de la o stare la alta. Dacă obiectivul este de a crea o tranziție lentă atunci când butonul se transformă dintr-un dreptunghi verde într-un cerc albastru, veți folosi valoare ușurință . Dacă ai vrea doar tranziția lentă în direcția opusă, ai folosi valoare ușurință .
Reducerea Codului nostru
În majoritatea cazurilor, reducerea duratei unui program este văzută ca o abordare practică. Acest lucru se datorează în principal faptului că mai puține linii de cod reduc probabilitatea ca erorile să treacă neobservate în programele dvs.
Codul de mai sus poate fi redus cu patru rânduri. Acest lucru poate fi realizat prin simpla utilizare a proprietății de animație fără identificarea explicită a fiecărei sub-proprietăți.
Reducerea codului pentru exemplul de animație buton
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;
}
}