. La pagina importa anche un file CSS denominato style.css:
<!DOCTYPE html>
Per applicare uno stile a entrambi gli elementi, crea un file style.css nella stessa cartella dell’HTML e aggiungi quanto segue:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
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 il riquadro rosso si anima utilizzando la direttiva CSS @keyframe, mentre il pulsante utilizza una transizione. Ciò ti consente di confrontare i due approcci utilizzando DevTools del browser.
Per accedere alla scheda Animazioni in Chrome DevTools:
Fai clic con il pulsante destro del mouse sulla tua pagina per visualizzare il menu contestuale.
Fare clic su Ispeziona.
Fai clic sui tre punti nell’angolo in alto a destra.
Passare a 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, rotateAndChangeColor, 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 in caso di problemi.
Inizia sostituendo il markup all’interno del tag HTML
con il seguente markup:
<div class="move-me move-me-1">steps(4, end)</div>
Quindi sostituisci tutti gli stili nel tuo file style.css con questo:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
A tutti gli elementi
è applicata l’animazione di spostamento dei passaggi, che cambia la posizione e il colore di 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 la scheda Animazioni in DevTools e aggiorni 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 incorporati nella scheda Stili 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 con il suo equivalente.
