CSS Animation Builder
Crea animazioni CSS visivamente con keyframe editor e anteprima live.
Configurazione Animazione
Keyframes
Anteprima Live
CSS Generato
@keyframes myAnimation {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0.5;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}Come utilizzare CSS Animation Builder
Configura i parametri base dell'animazione
Imposta il nome dell'animazione, la durata, il delay di inizio, il numero di iterazioni, la direzione e il fill mode. Il nome diventa l'identificatore usato nella proprieta' animation-name del CSS.
Scegli la timing function
Seleziona come l'animazione accelera e decelera nel tempo: ease, linear, ease-in, ease-out, ease-in-out o una curva cubic-bezier personalizzata. La timing function determina la "sensazione" dell'animazione.
Modifica i keyframe visivamente
Seleziona ogni keyframe (0%, 50%, 100% ecc.) e imposta le proprieta' CSS: transform (translate, scale, rotate), opacity, colore e colore di sfondo. L'anteprima live si aggiorna in tempo reale.
Copia il codice CSS generato
Il blocco CSS con la regola @keyframes e le proprieta' animation viene generato automaticamente. Copia il codice e incollalo nel tuo foglio di stile. E' compatibile con tutti i browser moderni (Chrome, Firefox, Safari, Edge).
Suggerimenti
- Per animazioni performanti usa solo le proprieta' transform e opacity nei keyframe: queste proprieta' vengono animate dal compositor thread del browser senza causare reflow/repaint, garantendo 60fps anche su dispositivi mobili.
- Imposta "animation-fill-mode: both" se vuoi che l'elemento sia invisibile prima dell'inizio dell'animazione (es. fade-in con delay): evita il flash dell'elemento nella sua posizione/opacita' iniziale durante il delay.
- Usa "animation-iteration-count: infinite" con attenzione: animazioni infinite aumentano il consumo energetico su mobile e possono distrarre gli utenti. Valuta di fermarle dopo alcune iterazioni o di usare hover-triggered animations.
Domande frequenti
Cosa fa la proprieta' fill-mode in CSS?
"forwards" mantiene lo stile dell'ultimo keyframe al termine dell'animazione. "backwards" applica lo stile del primo keyframe durante il delay. "both" combina i due comportamenti. "none" (default) riporta l'elemento allo stile originale prima e dopo l'animazione.
Cosa e' una curva cubic-bezier e quando usarla?
La curva cubic-bezier definisce una curva di interpolazione personalizzata attraverso 4 valori (P1x, P1y, P2x, P2y). Usa cubic-bezier per creare timing function che le parole chiave predefinite non possono esprimere, come animazioni con rimbalzo o accelerazioni non standard.
Quale browser supporta le animazioni CSS?
Tutte le animazioni CSS (@keyframes + animation) generate da questo strumento sono supportate da tutti i browser moderni: Chrome 43+, Firefox 16+, Safari 9+, Edge 12+. Non e' necessario il prefisso -webkit- per i browser attuali, ma e' consigliato per IE11 e Safari molto vecchi.
Come posso ottenere animazioni accessibili e rispettare prefers-reduced-motion?
Aggiungi nel tuo CSS una media query "@media (prefers-reduced-motion: reduce)" che imposta "animation: none" o riduce la durata. Questo rispetta le preferenze di utenti con disturbi vestibolari. Le animazioni puramente decorative (fade, scale) sono generalmente sicure; evita animazioni con movimento rapido o lampeggio.