Sofia Emelianova
La scheda Animazioni di Chrome DevTools è un potente strumento che ti consente di rallentare, riprodurre di nuovo, regolare i tempi di animazione CSS e visualizzare immediatamente i risultati.
La scheda Animazioni, quando è aperta, registra automaticamente le animazioni, le raggruppa in modo pratico e ti consente di:
- Riproduci e rallenta le animazioni per esaminarle meglio.
- Modifica durate, tempistiche e ritardi trascinando i punti in una sequenza temporale anziché indovinare e impostare manualmente i valori CSS.
Inoltre, puoi modificare i tempi di transizione e impostare valori personalizzati per la curva cubic-bezier con l'editor di transizione nel riquadro Elementi > Stili. Per scoprire di più, vedi Modificare la sincronizzazione di animazioni e transizioni con l'editor di animazioni.
Per un'esperienza di apprendimento più pratica, segui la guida Esaminare e modificare gli effetti di animazione CSS.