Sofia Emelianova
La scheda Animazioni di Chrome DevTools è un potente strumento che ti aiuta a rallentare, riprodurre di nuovo, regolare la sincronizzazione delle animazioni CSS e visualizzare immediatamente i risultati.
La scheda Animazioni, sebbene sia aperta, registra automaticamente le animazioni, le raggruppa comodamente e ti consente di:
- Riproduci di nuovo e rallenta le animazioni per ispezionarle meglio.
- Regola durate, tempismi e ritardi trascinando i punti in una sequenza temporale invece di indovinare e impostare i valori CSS manualmente.
Inoltre, puoi modificare i tempi di easing e impostare valori personalizzati della curva cubic-bezier con l'editor di easing nel riquadro Elementi > Stili. Per scoprire di più, consulta la sezione Modificare i tempi di animazione e transizione con l'Editor di adattamento.
Per un'esperienza di apprendimento più pratica, segui la guida Esaminare e modificare gli effetti di animazione CSS.