Qual è la differenza tra @keyframes e la proprietà di animazione?

@keyframes definisce quali cambiamenti durante l'animazione (i passi da/a o percentuale), mentre l'animazione a breve termine dice un elemento che keyframe da utilizzare più la sua durata, facilitando, ritardando, conteggio e direzione. Avete bisogno di entrambi per un'animazione di lavoro.

Come faccio a far giocare l'animazione solo una volta o un loop per sempre?

Impostare il conteggio di iterazione a un numero come 1 per una singola corsa, o spuntare 'infinito' a loop per sempre. Questo mappa al valore dell'animazione-terazione-conto nel cortometraggio generato.

CSS Keyframes Animation Generator

Scegli un'animazione preimpostata, sintonizza la tempistica, guardala in diretta, e copia sia il blocco @keyframes che il shorthand animazione.

Animation

Duration

Delay

Timing functionIteration count

infinite

DirectionFill mode

Preview

PLAY

CSS

Was this tool helpful?

Send output to:

How to use Keyframes Animation Generator

Fare clic su un'animazione preimpostata come fade-in, rimbalzo o rotazione.
Impostare la durata, la tempistica, il ritardo, il conteggio di iterazione, la direzione e la modalità di riempimento.
Guarda l'anteprima eseguire e premere Replay per riattivarlo.
Fare clic su Copia CSS per afferrare il blocco @keyframes e animazione in breve.

Che cos'e'?

Il Keyframes Animation Generator crea le animazioni CSS @keyframes Scegliere un preset — fade-in, slide-in, rimbalzo, polso, shake, spin, flip o zoom-in — e ciascuno spedisce il proprio blocco keyframe. L'elemento di anteprima esegue immediatamente l'animazione e rielabora automaticamente su ogni cambiamento; un pulsante Replay lo riattiva su richiesta utilizzando un riflusso forzato. Lo strumento viene eseguito interamente nel tuo browser ed esegue sia la definizione completa @keyframes che la corrispondente animation

Advertisement

`FAQ`

Qual è la differenza tra @keyframes e la proprietà di animazione?: @keyframes definisce quali cambiamenti durante l'animazione (i passi da/a o percentuale), mentre l'animazione a breve termine dice un elemento che keyframe da utilizzare più la sua durata, facilitando, ritardando, conteggio e direzione. Avete bisogno di entrambi per un'animazione di lavoro.
Come faccio a far giocare l'animazione solo una volta o un loop per sempre?: Impostare il conteggio di iterazione a un numero come 1 per una singola corsa, o spuntare 'infinito' a loop per sempre. Questo mappa al valore dell'animazione-terazione-conto nel cortometraggio generato.

`Related tools`

`Author`

MWMarcus Webb"The DevTool Craftsman"
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Keyframes Animation Generator on Wikipedia·Developer Tools on Wikipedia·Keyframes Animation Generator on Britannica

`People also use`

← Back to Developer Tools · All tags

Last updated: 2026-06-03