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.
• Modificare le animazioni. Modificare i tempi, il ritardo, la durata o gli offset dei fotogrammi chiave di un gruppo di animazioni. La modifica dei fotogrammi chiave e di Bézier non è supportata.

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

Che cos'è un gruppo di animazioni?

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

Per ora, sul Web non esiste un reale concetto di animazione di gruppo, quindi designer e sviluppatori di movimenti componino e cronometrano le singole animazioni in modo che appaiano 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:

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

  A questo punto, inizia a digitare Show Animations e seleziona il riquadro del riquadro a scomparsa 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 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: tramite scorrimento del mouse e pianificazione regolare (in base al tempo).

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

3. Sequenza temporale. 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, eseguirne lo scrubbing o passare a un punto specifico.

4. Dettagli. Ispeziona e modifica il gruppo di animazioni selezionato.

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

Ispeziona animazioni

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

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

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

Visualizza 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 dedicata. Per vedere il nome completo 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 Elements.

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

La sezione più a sinistra e più scura di un'animazione è la sua definizione. Sezioni a destra e 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 assegna loro la dello stesso colore. Il colore stesso è casuale e non ha alcun significato. Ad esempio, nello screenshot seguente i due elementi div.eye.left::after e div.eye.right::after hanno la stessa animazione (eyes) applicati, 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 successivo rappresenti l'animazione originale:

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

Se l'animazione definisce regole per i fotogrammi chiave, queste sono 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.

Modifica @keyframes dal vivo

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

Prova su 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 Elements, controlla l'elemento con class="pulser" e, in Elements, trova la sezione @keyframes pulse.
3. Prova a modificare i fotogrammi chiave, ad esempio, cambia il secondo fotogramma chiave da 50% a 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 Elements > 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 Elements > Stili: modifica il CSS degli pseudo-elementi ::view-transition.

5. Riprendi l'animazione e riproducila di nuovo per vedere il risultato.

Per ulteriori informazioni, vedi Transizioni semplici e fluide con l'API View Transizione.