Analiza detaliată a animațiilor CSS cu ajutorul instrumentelor DevTools
Animațiile CSS, atunci când sunt implementate corect, pot transforma un site web obișnuit într-o experiență remarcabilă. Cu toate acestea, crearea unor animații complexe poate fi o provocare fără a avea la dispoziție instrumente adecvate care să ofere control precis. Vă imaginați cum ar fi să puteți vizualiza fiecare etapă a unei animații, în timp real?
Funcția DevTools, disponibilă atât în Google Chrome, cât și în Firefox, vă oferă exact această posibilitate, permițându-vă să inspectați animațiile în detaliu. În acest articol, veți descoperi cum puteți utiliza această funcție pentru a îmbunătăți animațiile pe care le creați și pentru a înțelege mecanismele din spatele animațiilor preferate de pe web.
Chrome DevTools reprezintă o resursă valoroasă pentru depanarea elementelor CSS și nu numai. Pentru a începe, vom analiza un exemplu simplu, care vă va familiariza cu modul în care puteți folosi acest instrument pentru a inspecta animațiile.
Crearea animațiilor prin HTML și CSS
Următorul cod HTML generează o pagină cu două elemente: un <div> și un <button>. Această pagină include și un fișier CSS, denumit style.css:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
Pentru a stiliza elementele menționate, creați un fișier style.css în același director cu fișierul HTML și adăugați următoarele linii de cod:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-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 configurează două elemente:
- Un pătrat care se rotește și își schimbă culoarea odată cu încărcarea paginii.
- Un buton care își modifică culoarea de fundal atunci când mouse-ul trece peste el.
Este important de observat că pătratul roșu este animat prin directiva CSS @keyframe, în timp ce butonul utilizează o tranziție. Acest lucru vă oferă oportunitatea de a compara cele două abordări cu ajutorul instrumentelor DevTools din browser.
Inspectarea animațiilor cu DevTools
Pentru a accesa secțiunea Animații din Chrome DevTools, urmați acești pași:
- Faceți clic dreapta pe pagina web pentru a afișa meniul contextual.
- Selectați opțiunea „Inspectați”.
- Faceți clic pe cele trei puncte verticale din colțul din dreapta sus al panoului DevTools.
- Alegeți opțiunea „Mai multe instrumente” și apoi „Animații”.
Această acțiune va deschide un panou dedicat animațiilor în partea de jos a ferestrei DevTools.
Toate animațiile care au loc în pagina respectivă vor fi afișate în acest panou. Dacă reîncărcați pagina și treceți mouse-ul peste buton, animațiile vor apărea în fila Animații.
Puterea reală a acestui instrument se dezvăluie atunci când dați clic pe o animație specifică. De exemplu, dacă selectați animația pătratului, veți observa că browserul prezintă detaliile cadrelor cheie în felul următor:
DevTools afișează toate animațiile asociate cu elementul selectat. În cazul nostru, doar animația rotateAndChangeColor este asociată cu pătratul roșu.
Puteți manipula linia de timp a animației, trăgând-o spre stânga pentru a accelera mișcarea sau spre dreapta pentru a o încetini. De asemenea, aveți posibilitatea de a opri animația în anumite puncte, folosind butoanele de pauză și redare. Procentele de sus vă oferă opțiunea de a vizualiza animația la un sfert sau o zecime din viteza normală.
Când inspectați tranziția butonului, DevTools vă va prezenta proprietățile individuale ale acesteia: culoarea și culoarea de fundal.
Acest instrument vă permite să ajustați animația pentru a înțelege cu exactitate modul în care funcționează și a depana eventualele probleme.
Exemple avansate de animații
Pentru a continua, înlocuiți conținutul din interiorul etichetei <body> a fișierului HTML cu următorul cod:
<div class="move-me move-me-1">steps(4, end)</div> <br /> <div class="move-me move-me-2">steps(4, start)</div> <br /> <div class="move-me move-me-3">no steps</div>
Apoi, înlocuiți toate stilurile din fișierul style.css cu următorul set de reguli:
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
Fiecare element <div> are aplicată animația de deplasare în pași, care controlează modificarea poziției și a culorii de fundal. În plus, fiecare element are o animație diferită care gestionează modul în care se efectuează tranziția.
În timp ce al treilea element alunecă continuu spre dreapta, primele două se vor deplasa în pași, până când vor ajunge la capătul ecranului (al doilea element va începe mișcarea înaintea primului).
Dacă deschideți secțiunea Animații în DevTools și reîncărcați pagina, veți găsi informații complete despre aceste animații:
Observăm mai multe elemente care se animează în același interval de timp. În acest scenariu, culoarea de fundal și poziția fiecărui element sunt animate simultan.
Un alt aspect important sunt nodurile de pe fiecare linie de animație. Când o animație se repetă la infinit, aceste noduri indică începutul și sfârșitul fiecărei iterații.
Nodurile goale corespund cadrelor cheie din animație, în timp ce nodurile colorate reprezintă începutul și sfârșitul animației. Noduri colorate vor apărea la fiecare reluare a animației de la început.
Nu în ultimul rând, puteți modifica animațiile direct prin DevTools, similar cu orice altă proprietate CSS. Toate modificările pe care le efectuați prin interfața de animație vor fi reflectate în stilurile inline, în fila Stiluri, și invers. Acest lucru vă permite să faceți modificări rapide, să le testați și să le transferați în proiectul real.
Funcția DevTools a Google Chrome este un instrument valoros pentru depanarea codului CSS, inclusiv a animațiilor. Acesta vă oferă o vizualizare detaliată a tuturor tranzițiilor și animațiilor din pagina dvs., oferindu-vă control asupra fiecărui pas al procesului.
Ca dezvoltator web, ar trebui să fiți familiarizați cu funcțiile DevTools ale browserului pe care îl utilizați sau cu echivalentul acestora.