Le animazioni sono una potente aggiunta ai CSS, ma la loro forma testuale può renderne difficile il lavoro. I DevTools di Chrome in soccorso!

Le animazioni CSS, eseguite correttamente, possono elevare il tuo sito ad un altro livello. Ma creare queste animazioni può essere complicato senza strumenti che ne forniscano un controllo accurato. E se ci fosse un modo per vedere esattamente cosa sta succedendo in ogni fase della tua animazione?

La funzionalità DevTools di Google Chrome e Firefox offre la possibilità di ispezionare le tue animazioni. Scopri come utilizzare questa funzione per migliorare le tue animazioni e decodificare le tue animazioni preferite sul Web.

DevTools di Chrome è un ottimo modo per farlo eseguire il debug di tutti gli aspetti del tuo CSS, e molto altro ancora. Inizia con questo semplice esempio per capire come usarlo per ispezionare le animazioni.

Il codice per questi esempi è disponibile in un repository GitHub.

Definisci animazioni con HTML e CSS

Il seguente codice HTML esegue il rendering di una pagina con due elementi: a e un. La pagina importa anche un file CSS denominato

instagram viewer
style.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>

Per modellare entrambi gli elementi, crea a style.css file nella stessa cartella dell'HTML e aggiungi quanto segue:

#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;
 }
}

Questi stili creano due componenti:

  • Una semplice scatola che gira e cambia colore quando la pagina viene caricata.
  • Un pulsante che cambia il colore di sfondo quando ci passi sopra.

Tieni presente che la casella rossa si anima utilizzando il file Direttiva CSS @keyframe, mentre il pulsante utilizza una transizione. Ciò ti consente di confrontare i due approcci utilizzando i DevTools del browser.

Per accedere al Animazioni scheda in Chrome DevTools:

  1. Fai clic con il pulsante destro del mouse sulla tua pagina per visualizzare il menu contestuale.
  2. Clic Ispezionare.
  3. Fai clic sui tre punti nell'angolo in alto a destra.
  4. Navigare verso Altri strumenti > Animazioni.

Questo aprirà il cassetto delle animazioni nella sezione inferiore.

Tutte le animazioni che si verificano sulla tua pagina verranno visualizzate qui. Se aggiorni la pagina e passi il mouse sul pulsante, le animazioni verranno visualizzate nella scheda animazioni.

Il vero potere arriva quando fai clic su una di queste animazioni. Ad esempio, se fai clic sull'animazione della casella, vedrai il browser presentare i fotogrammi chiave come segue:

I DevTools visualizzano tutte le animazioni relative all'elemento selezionato. Poiché esiste una sola animazione definita per il riquadro rosso:ruotare e cambiare colore—ne vedrai solo i dettagli.

Puoi trascinare la linea a sinistra per rendere l'animazione molto più veloce o trascinarla a destra per rallentarla. Puoi anche mettere in pausa l'animazione in determinati punti attivando le icone di pausa e riproduzione. Le percentuali in alto ti consentono di riprodurre l'animazione rispettivamente a un quarto della sua velocità normale e a un decimo della sua velocità.

Quando controlli la transizione del pulsante, DevTools mostrerà le singole proprietà della transizione: il colore e il colore di sfondo.

Questo strumento ti consente di manipolare la tua animazione per vedere esattamente come funziona. Puoi usarlo per risolvere i problemi del tuo sito web se ci sono problemi.

Esempi di animazione avanzata

Inizia sostituendo il markup all'interno del tuo codice HTML tag con il seguente markup:


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>

Quindi sostituisci tutti gli stili nel tuo style.css file con questo:

.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;
 }
}

Tutti i gli elementi hanno il muoversi a passi animazione applicata a loro, che cambia la posizione e il colore dello sfondo. In aggiunta a ciò, ogni casella ha un'animazione diversa per controllare il numero di passi che farà.

Mentre la terza casella scivola costantemente verso destra, le prime due si muoveranno di due passi alla volta finché non raggiungeranno tutte la fine dello schermo (con la seconda casella che inizierà prima della prima).

Se apri il Animazioni tab in DevTools e aggiorna la pagina, troverai tutte le informazioni relative a queste animazioni:

Ci sono diversi elementi che si animano tutti nello stesso periodo. In questo scenario, il colore dello sfondo e la posizione della casella si animano contemporaneamente per tutte e tre le caselle.

Un'altra cosa da notare sono i nodi su ciascuna linea di animazione. Quando un'animazione si ripete un numero infinito di volte, i nodi mostrano dove inizia e finisce ciascuna ripetizione nell'animazione.

I nodi vuoti sono essenzialmente i fotogrammi chiave della tua animazione, mentre quelli pieni e colorati rappresentano l'inizio e la fine dell'animazione. Avrai nodi di colore scuro ogni volta che l'animazione ricomincia.

Infine, puoi modificare le animazioni utilizzando DevTools, proprio come puoi fare con qualsiasi proprietà CSS. Tutte le modifiche apportate utilizzando l'interfaccia utente dell'animazione verranno visualizzate negli stili in linea sotto il file Stili scheda e viceversa. Ciò ti consente di apportare modifiche, testarle e copiarle nel tuo progetto reale.

La funzione DevTools di Google Chrome è uno strumento fantastico per eseguire il debug del tuo CSS, comprese le animazioni. Fornisce una visualizzazione dettagliata di ogni transizione e animazione sulla tua pagina, così puoi vedere esattamente cosa sta succedendo in ogni passaggio.

Come sviluppatore web, dovresti avere familiarità con la funzione DevTools del tuo browser o il suo equivalente.