Generatore di Animazioni CSS
Il generatore di animazioni CSS crea animazioni @keyframes da 14 preset come fade in, slide in, bounce in, pulse, spin, shake e zoom, con controlli per durata, funzione di timing e numero di ripetizioni.
Informazioni su questo strumento
Il generatore di animazioni CSS crea animazioni @keyframes da 14 preset come fade in, slide in, bounce in, pulse, spin, shake e zoom, con controlli per durata, funzione di timing e numero di ripetizioni.
Come si usa
- Scegli un preset di animazione.
- Imposta durata, funzione di timing e numero di ripetizioni.
- Premi Replay per vedere l'anteprima.
- Clicca Copy CSS per ottenere @keyframes e la regola animation.
Da sapere
- Un'animazione CSS ha due parti: una regola @keyframes e una proprietà animation sull'elemento.
- Animare transform e opacity è di solito la scelta più fluida in termini di prestazioni.
- Le funzioni di timing come ease-out partono veloci e rallentano, un effetto naturale per le entrate.
- Rispetta la media query prefers-reduced-motion per gli utenti che hanno chiesto meno movimento.
- Un numero di ripetizioni infinito è adatto ai loader; gli effetti di entrata di solito vengono eseguiti una sola volta.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come creo un'animazione CSS?
Definisci il movimento in una regola @keyframes, poi collegala con animation: nome durata timing ripetizioni. Il generatore scrive entrambe per te.
Che differenza c'è tra transizioni e animazioni CSS?
Le transizioni animano il passaggio tra due stati quando una proprietà cambia, per esempio all'hover. Le animazioni usano keyframes, possono partire automaticamente e ripetersi in loop.
Come faccio a ripetere un'animazione all'infinito?
Imposta il numero di ripetizioni su infinite, per esempio animation: spin 1s linear infinite.
Le animazioni CSS influiscono sull'accessibilità?
Movimenti ampi o continui possono dare fastidio ad alcuni utenti. Racchiudi le animazioni non essenziali in @media (prefers-reduced-motion: no-preference).