Animazioni: controllo e modifica degli effetti di animazione CSS

Kayce Basques

Sofia Emelianova

Esamina e modifica le animazioni con la scheda del riquadro a scomparsa Animazioni di Chrome DevTools.

Panoramica

Per acquisire animazioni, apri il riquadro Animazioni. Rileva automaticamente le animazioni e le ordina in gruppi.

Il riquadro Animazioni ha due scopi principali:

• Esamina le animazioni. Rallentare, ripetere o ispezionare il codice sorgente per un'animazione gruppo.
• Modifica le animazioni. Modificare i tempi, il ritardo, la durata o gli offset dei fotogrammi chiave di un gruppo di animazioni. La modifica dei keyframe e delle curve di Bezier non è supportata.

Il riquadro Animazioni supporta animazioni CSS, transizioni CSS, animazioni web e l'API View Transitions. Le animazioni requestAnimationFrame non sono ancora supportate.

Che cos'è un gruppo di animazioni?

Un gruppo di animazioni è un insieme di animazioni che sembrano correlate tra loro.

Per il momento, il web non ha un concetto reale di animazione di gruppo, quindi i motion designer e gli sviluppatori compongono e programmano le singole animazioni in modo che vengano visualizzate come un unico effetto visivo coerente. Il riquadro Animazioni prevede animazioni correlate in base all'ora di inizio (esclusi i ritardi) e le raggruppa affiancate.

In altre parole, il riquadro Animazioni raggruppa le animazioni attivate nello stesso blocco di script, ma se sono asincrone, finiscono in gruppi diversi.

Apri il riquadro Animazioni

Esistono due modi per aprire il riquadro Animazioni:

• Seleziona Personalizza e controlla DevTools > Altri strumenti > Animazioni.

• Apri il menu Comando premendo una delle seguenti opzioni:

  • Su macOS: Comando+Maiusc+P
  • Su Windows, Linux o ChromeOS: Control+Maiusc+P

  Quindi, inizia a digitare Show Animations e seleziona il riquadro del riquadro laterale corrispondente.

Per impostazione predefinita, il riquadro Animazioni si apre in una scheda accanto al riquadro a scomparsa della console. Come scheda a scomparsa, puoi utilizzarla con qualsiasi riquadro o spostarla in cima a DevTools.

Il riquadro Animazioni acquisisce automaticamente le animazioni in corso quando lo apri. Se un'animazione viene attivata al caricamento della pagina o si è già interrotta, ricarica la pagina con il riquadro aperto.

Acquisisci familiarità con l'interfaccia utente del riquadro delle animazioni

Il riquadro Animazioni ha quattro sezioni principali:

1. Controlli. Da qui, puoi bloccare Cancella tutti i gruppi di animazioni acquisiti, mettere in pausa Metti in pausa o play_arrow Riprendi le animazioni o modificare la velocità del gruppo di animazioni selezionato.

2. Panoramica. Mostra i gruppi di animazioni acquisiti di due tipi contrassegnati da icone: con scorrimento del mouse e pianificati regolari (in base al tempo).

   Seleziona un gruppo di animazioni qui per ispezzionarlo e modificarlo nel riquadro Dettagli.

3. Cronologia. A seconda del tipo di gruppo di animazioni, la sequenza temporale può essere:

   • In pixel per le animazioni basate sullo scorrimento del mouse.
   • In millisecondi per le animazioni basate sul tempo schedule.

   Nella sequenza temporale puoi riprodurre di nuovo e riprodurre un'animazione, eseguire lo scrubbing o passare a un punto specifico.

4. Dettagli. Controlla e modifica il gruppo di animazione selezionato.

Per acquisire un'animazione, attivala mentre è aperto il riquadro Animazioni.

Controllare le animazioni

Dopo aver acquisito un'animazione, puoi riprodurla in vari modi:

• Passa il mouse sopra la miniatura nel riquadro Panoramica per visualizzarne un'anteprima.
• Trascina la testina di riproduzione (barra verticale rossa) per eseguire la scansione dell'animazione dell'area visibile o fai clic in un punto qualsiasi della sequenza temporale per impostare la testina di riproduzione su un punto specifico. La riproduzione dell'animazione continua se era già in corso e in caso contrario si interrompe.
• Seleziona il gruppo di animazione dal riquadro Panoramica (in modo che venga visualizzato nel riquadro Dettagli) e premi il pulsante Riproduci. L'animazione viene riprodotta nell'area visibile.

Fai clic sui pulsanti Velocità animazione nella barra Controlli per modificare la velocità di anteprima del gruppo di animazioni selezionato.

Visualizzare i dettagli dell'animazione

Dopo aver acquisito un gruppo di animazioni, selezionalo dal riquadro Panoramica per visualizzarne i dettagli.

Nel riquadro Dettagli, ogni singola animazione ha una riga propria. Per visualizzare l'intero nome dell'elemento corrispondente, ridimensiona la colonna del nome.

Passa il mouse sopra un'animazione per evidenziarla nell'area visibile. Fai clic sull'animazione per selezionarla nel riquadro Elementi.

Alcune animazioni si ripetono all'infinito se la proprietà animation-iteration-count è impostata su infinite. Il riquadro Animazioni mostra le relative definizioni e le relative iterazioni.

La sezione più a sinistra e più scura di un'animazione è la sua definizione. Le sezioni a destra, più sbiadite, rappresentano le iterazioni.

Ad esempio, nello screenshot successivo, le sezioni 2 e 3 rappresentano iterazioni della prima sezione.

Se a due elementi viene applicata la stessa animazione, il riquadro Animazioni li assegna allo stesso colore. Il colore stesso è casuale e non ha alcun significato. Ad esempio, nello screenshot di seguito i due elementi div.eye.left::after e div.eye.right::after hanno la stessa animazione (eyes) applicata, così come gli elementi div.feet::before e div.feet::after.

Modificare le animazioni

Esistono tre modi per modificare un'animazione con il riquadro Animazioni:

• Durata dell'animazione.
• Tempi dei fotogrammi chiave.
• Ritardo nel tempo di avvio.

Per questa sezione, supponiamo che lo screenshot seguente rappresenti l'animazione originale:

Per modificare la durata di un'animazione, trascina il primo o l'ultimo cerchio.

Se l'animazione definisce regole di fotogrammi chiave, queste vengono rappresentate come cerchi interni bianchi. Trascina una di queste opzioni per modificare la tempistica del fotogramma chiave.

Per aggiungere un ritardo a un'animazione, fai clic sull'animazione stessa, non sui cerchi, quindi trascinala in un punto qualsiasi.

Modificare @keyframes in diretta

Quando modifichi @keyframes in Stili, puoi visualizzare subito gli effetti nel riquadro Animazioni.

Prova questa pagina dimostrativa:

1. Apri il riquadro Animazioni. Acquisisce automaticamente l'animazione pulsante sulla pagina. Seleziona l'animazione sotto i controlli nella barra delle azioni.
2. In Elementi, controlla l'elemento con class="pulser" e, in Stili, trova la sezione @keyframes pulse.
3. Prova a modificare i fotogrammi chiave, ad esempio imposta il secondo fotogramma chiave su 50% anziché 20%.
4. Osserva in che modo le modifiche apportate agli Stili influiscono sull'animazione acquisita dal riquadro Animazioni.

Modificare gli pseudo-elementi ::view-transition durante un'animazione

Con l'API View Transizione, puoi modificare il DOM in un solo passaggio, creando al contempo una transizione animata tra i due stati. Durante un'animazione, l'API crea un albero di pseudo-elementi con la seguente struttura:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Per modificare questa struttura in Elementi > Stili:

1. Apri DevTools ed esamina una pagina che utilizzava l'API View Transiziones. Ad esempio, questa pagina dimostrativa.
2. In Animazioni, fai clic su Metti in pausa Metti in pausa.

3. Nella pagina, attiva un'animazione. Il riquadro Animazioni lo acquisisce e lo mette subito in pausa. Ora puoi trovare la struttura ::view-transition nel DOM, sopra l'elemento <head>.

   

4. In Elementi > Stili: modifica il CSS degli pseudo-elementi ::view-transition.

5. Riprendi l'animazione e Riproduci per vedere il risultato.

Per saperne di più, vedi Transizioni semplici e fluide con l'API View Transitions.