Animațiile sunt un plus puternic pentru CSS, dar forma lor text le poate face dificil de lucrat. Chrome DevTools la salvare!
Animațiile CSS, realizate corect, vă pot ridica site-ul la un alt nivel. Dar crearea acestor animații poate fi dificilă fără instrumente care oferă un control fin asupra lor. Ce se întâmplă dacă ar exista o modalitate de a vedea exact ce se întâmplă la fiecare pas al animației tale?
Funcția DevTools atât a Google Chrome, cât și a Firefox vine cu capacitatea de a vă inspecta animațiile. Aflați cum să utilizați această funcție pentru a vă îmbunătăți propriile animații și a face inginerie inversă pentru animațiile preferate de pe web.
DevTools de la Chrome este o modalitate excelentă de a face acest lucru depanați toate aspectele CSS-ului dvs, și mai mult în afară. Începeți cu acest exemplu simplu pentru a înțelege cum îl puteți utiliza pentru a inspecta animațiile.
Codul pentru aceste exemple este disponibil în un depozit GitHub.
Definiți animații cu HTML și CSS
Următorul cod HTML redă o pagină cu două elemente: a si a. Pagina importă, de asemenea, un fișier CSS numit
stil.css:html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>
Pentru a stila ambele elemente, creați un stil.css fișier în același folder cu HTML și adăugați următoarele:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
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 utilizând 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 Animații fila în Chrome DevTools:
- Faceți clic dreapta pe pagina dvs. pentru a afișa meniul contextual.
- Clic Inspecta.
- Faceți clic pe punctele triple din colțul din dreapta sus.
- Navigheaza catre 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— vei vedea doar detaliile lui.
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 poți folosi pentru depanați site-ul dvs dacă există probleme.
Exemple avansate de animație
Începeți prin a înlocui marcajul din HTML etichetă cu următorul marcaj:
class="move-me move-me-1">steps(4, end)</div>
<br />
class="move-me move-me-2">steps(4, start)</div>
<br />
class="move-me move-me-3">no steps</div>
Apoi înlocuiți toate stilurile din dvs stil.css fisier cu asta:
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}.move-me-3 {
animation: move-in-steps 8sinfinite;
}body {
padding: 20px;
}@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
Toate elementele au mutarea în trepte animație aplicată acestora, 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 la un moment dat până când toți ajung la sfârșitul ecranului (cu a doua casetă începând înaintea primei casete).
Dacă deschideți Animații din 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 sub Stiluri fila ș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.