6XC

Generatore di Animazioni CSS

Scegli un preset di keyframe — rotazione, pulsazione, rimbalzo, scuotimento, dissolvenza, scorrimento — regola durata e ripetizioni, copia @keyframes + classe.

634 visualizzazioni

Le animazioni CSS

Un'animazione abbina un blocco @keyframes (cosa cambia) alla proprietà animation (come viene riprodotta: durata, timing, numero di ripetizioni). A differenza delle transizioni, funzionano da sole, senza bisogno di hover o cambio di classe. Questo generatore offre sei preset già pronti e produce sia i keyframes sia una classe pronta all'uso.

Domande Frequenti

Animazione o transizione — quale scegliere?

La transizione reagisce a un cambiamento di stato (hover, classe). L'animazione funziona da sola, può ripetersi all'infinito e definire molti passaggi — usala per spinner, pulsazioni di richiamo ed effetti d'ingresso.

Come rispetto gli utenti che preferiscono meno movimento?

Racchiudi l'animazione in @media (prefers-reduced-motion: no-preference) { … } oppure disattivala nella variante ridotta — gli utenti sensibili a disturbi vestibolari te ne saranno grati.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera