Generatore di animazioni CSS @keyframes con anteprima

Genera un'animazione CSS @keyframes (fade, slide, bounce...) con anteprima e codice.

Durations

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 100 % lato client — nessun dato inviato

Crea animazioni CSS @keyframes e copia codice pronto all'uso con un'anteprima dal vivo. Modifica passaggi, durata e tempi senza scrivere nulla a mano. Lo strumento funziona interamente nel tuo browser, senza che i dati vengano inviati da nessuna parte.

What is it for?

▸ Prototipa l'animazione di un pulsante o di un'icona
▸ Genera codice @keyframes senza doverlo memorizzare
▸ Visualizza l'anteprima di un'animazione prima di integrarla
▸ Ottimizza durata ed easing in tempo reale

FAQ

Posso copiare il CSS generato?

Sì, il codice @keyframes completo è pronto per essere incollato.

L'anteprima è live?

Sì, ogni modifica aggiorna immediatamente l'animazione.

Posso scegliere la timing function?

Sì, imposta durata, easing e ripetizioni.