CSS @keyframes: Crea Animazioni Fluide Senza JavaScript

Le animazioni CSS sono più performanti delle animazioni JavaScript perché il browser può ottimizzarle, delegarle al thread compositor ed eseguirle a 60fps anche quando il thread principale è occupato. Il nostro generatore visuale di @keyframes rende la creazione di animazioni fluide accessibile a tutti.

Struttura di un'Animazione CSS

Un'animazione CSS richiede due componenti: la regola @keyframes che definisce gli stati intermedi dell'animazione, e la proprietà animation sull'elemento che specifica nome, durata, easing, delay e comportamento di ripetizione.

Proprietà Animabili per le Migliori Performance

• Usa con preferenza: transform (translate, scale, rotate) e opacity — il browser li anima sul thread compositor senza reflow.
• Evita quando possibile: width, height, top, left, padding, margin — causano layout reflow ad ogni frame.
• Usa will-change: transform sugli elementi che animerai frequentemente per avvisare il browser in anticipo.

Funzioni di Easing

L'easing determina la velocità dell'animazione nel tempo: ease inizia lento, accelera e rallenta; linear velocità costante; ease-in inizia lento; ease-out finisce lento (ottimo per slide-out); cubic-bezier() per curve personalizzate.