Generatore Animazione CSS Gratis: Creare Animazioni Visuale Online
14 utilizziConsigli Animazione CSS
Preset
Bounce, fade, slide, rotate, pulse e altro. Personalizza.
Durata e timing
Regola durata, delay, iterazioni e timing function.
CSS completo
@keyframes e animation generati. Copia e usa.
Domande Frequenti
Come creare animazione CSS?
Scegli preset o configura. Anteprima dal vivo.
Cos'è timing function?
Controlla velocità: linear, ease, ease-in, ease-out, ease-in-out.
Genera @keyframes?
Sì, regola @keyframes e proprietà animation.
Posso regolare la durata dell'animazione senza ricrearla?
Assolutamente sì. Trova semplicemente il cursore 'Durata' nel generatore. Trascinandolo verso sinistra si riduce il tempo, rendendo l'animazione più veloce. Trascinandolo verso destra si aumenta. Vedrai l'anteprima dal vivo aggiornarsi istantaneamente, mostrandoti esattamente come appare un'animazione di 1,5 secondi rispetto a una di 0,5 secondi. Ciò ti consente di ottimizzare la temporizzazione al volo.
Il generatore funziona per effetti hover e animazioni attivate dallo scroll?
Sì, ma con una differenza netta. Il nostro strumento genera animazioni CSS che partono al caricamento della pagina o tramite una classe CSS. Per gli effetti hover, devi racchiudere l'animazione generata in una pseudo-classe `:hover` da solo — non abbiamo ancora un interruttore dedicato. Le animazioni attivate dallo scroll richiedono JavaScript (come Intersection Observer) per aggiungere la classe quando l'elemento entra in vista. Il generatore ti fornisce l'animazione principale; tu controlli quando si attiva. Un consiglio pratico: esporta il codice, imposta uno stato `paused` predefinito e usa JS per riattivarlo durante lo scroll.
Come Usare
- Scegli preset o configura
- Regola durata e timing
- Anteprima animazione
- Copia CSS con @keyframes