. Pagina importă și un fișier CSS numit style.css:
<!DOCTYPE html>
Pentru a stila ambele elemente, creați un fișier style.css în același folder cu HTML și adăugați următoarele:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Aceste stiluri creează două componente:
O casetă simplă care se învârte și își schimbă culoarea când pagina se încarcă.
Un buton care își schimbă culoarea de fundal atunci când treci cu mouse-ul peste el.
Rețineți că caseta roșie se anime folosind directiva CSS @keyframe, în timp ce butonul folosește o tranziție. Acest lucru vă permite să comparați cele două abordări folosind DevTools ale browserului.
Pentru a accesa fila Animații din Chrome DevTools:
Faceți clic dreapta pe pagina dvs. pentru a afișa meniul contextual.
Faceți clic pe Inspectați.
Faceți clic pe punctele triple din colțul din dreapta sus.
Navigați la Mai multe instrumente > Animații.
Aceasta va deschide sertarul de animație în secțiunea de jos.
Toate animațiile care apar pe pagina dvs. vor apărea aici. Dacă vă reîmprospătați pagina și treceți cursorul pe buton, animațiile vor apărea în fila Animații.
Puterea reală intervine atunci când faceți clic pe una dintre aceste animații. De exemplu, dacă faceți clic pe animația casetei, veți vedea că browserul prezintă cadrele cheie după cum urmează:
DevTools afișează toate animațiile referitoare la elementul pe care îl selectați. Deoarece există doar o singură animație definită pentru caseta roșie—rotateAndChangeColor—veți doar să vedeți detaliile acesteia.
Puteți trage linia spre stânga pentru a face animația mult mai rapidă sau trageți-o spre dreapta pentru a încetini animația. De asemenea, puteți întrerupe animația în anumite puncte prin comutarea între pictogramele de pauză și redare. Procentele din partea de sus vă permit să redați animația la un sfert din viteza normală și, respectiv, o zecime din viteza sa.
Când inspectați tranziția butonului, DevTools va afișa proprietățile individuale ale tranziției: culoarea și culoarea de fundal.
Acest instrument vă permite să vă manipulați animația pentru a vedea exact cum funcționează. Îl puteți folosi pentru a depana site-ul dvs. dacă există probleme.
Începeți prin a înlocui marcajul din eticheta HTML
cu următorul marcaj:
<div class="move-me move-me-1">steps(4, end)</div>
Apoi înlocuiți toate stilurile din fișierul style.css cu aceasta:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Toate elementele
au animația de mutare în pași aplicată, care face tranziția poziția și culoarea de fundal. În plus, fiecare casetă are o animație diferită pentru a controla numărul de pași pe care îi va face.
În timp ce a treia casetă alunecă constant spre dreapta, primele două se vor mișca câte doi pași până când ajung cu toții la sfârșitul ecranului (cu a doua casetă începând înaintea primei casete).
Dacă deschideți fila Animații în DevTools și reîmprospătați pagina, veți găsi toate informațiile referitoare la aceste animații:
Există mai multe elemente care toate animă în aceeași perioadă. În acest scenariu, culoarea de fundal și poziția casetei sunt animate în același timp pentru toate cele trei casete.
Un alt lucru de remarcat sunt nodurile de pe fiecare linie de animație. Când o animație are loc de un număr infinit de ori, nodurile arată unde începe și se termină fiecare repetare în animație.
Nodurile goale sunt în esență cadrele cheie din animația dvs., în timp ce cele solide, colorate reprezintă începutul și sfârșitul animației. Veți avea noduri de culoare închisă de fiecare dată când animația dvs. începe de la capăt.
În cele din urmă, puteți edita animațiile folosind DevTools, la fel cum puteți cu orice proprietate CSS. Toate modificările pe care le faceți folosind interfața de utilizare a animației vor apărea în stilurile inline din fila Stiluri și invers. Acest lucru vă permite să faceți modificări, să le testați și să le copiați în proiectul dvs. real.
Caracteristica DevTools a Google Chrome este un instrument minunat pentru depanarea CSS-ului, inclusiv animațiile. Oferă o vizualizare detaliată a fiecărei tranziții și animații de pe pagina dvs., astfel încât să puteți vedea exact ce se întâmplă la fiecare pas.
În calitate de dezvoltator web, ar trebui să fiți familiarizat cu funcția DevTools a browserului dvs. sau echivalentul acesteia.
