TL
Tool Lab
💰Donare
💰Donare

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Informazioni su questo strumento

Il Generatore di Animazioni CSS crea animazioni fluide configurando preset di keyframe, temporizzazione, durata, ritardo e iterazioni. Un'anteprima dal vivo mostra l'animazione in azione.

Le animazioni CSS che usano transform e opacity sono efficienti perché vengono composte sulla GPU e non attivano layout o repaint.

Come usare

  1. Seleziona un tipo di animazione dal menu a discesa.
  2. Imposta la durata (es. 0.5s, 2s).
  3. Scegli una funzione di temporizzazione per controllare l'easing.
  4. Imposta opzionalmente un ritardo prima dell'inizio dell'animazione.
  5. Imposta il numero di iterazioni (un numero o infinite).
  6. Clicca su Riproduci per l'anteprima, poi Copia per esportare il CSS.

Casi d'uso

Gli sviluppatori front-end usano animazioni di dissolvenza e scorrimento per migliorare le prestazioni percepite. I designer UI prototipano micro-interazioni come pulse di pulsanti e scuotimento di notifiche.

Domande frequenti

  • Cos'è fill-mode: both? — L'animazione applica gli stili iniziali prima di iniziare e mantiene gli stili finali dopo la fine. È l'impostazione più utile.
  • Come fare un'animazione in loop infinito? — Imposta il numero di iterazioni su infinite.
  • Le animazioni CSS sono migliori di JavaScript? — Per effetti semplici e dichiarativi, le animazioni CSS sono preferite. Per sequenziamento complesso o interattività, JavaScript offre più controllo.