Generatore di animazioni CSS
Regola i preset di movimento o i keyframe e riproduci l'animazione per verificarla. Ottieni il CSS da usare in una pagina web e un esempio d'uso HTML.
Cosa puoi fare
Regola il movimento da un preset
Scegli tra 12 tipi, tra cui entrata, uscita e rotazione. Modifica la durata e la ripetizione in base al tuo uso.
Modifica anche gli stati intermedi
Specifica spostamento, rotazione, scala e opacità per ogni keyframe e controlla il movimento generato.
Ottieni CSS e HTML
Copia o salva il CSS dell'animazione e un esempio d'uso HTML con la stessa classe.
Come si usa
Scegli un preset
Scegli il movimento che vuoi e imposta la durata di 1 riproduzione. Se selezioni un preset diverso, anche le impostazioni che hai regolato vengono sostituite.
Regola solo le parti che ti servono
Apri i dettagli di riproduzione o i keyframe per cambiare il movimento intermedio, la direzione, la ripetizione e altre impostazioni.
Genera e riproduci
Controlla con «Genera CSS e anteprima». Se modifichi qualche impostazione, genera di nuovo.
Ottieni CSS e HTML
Applica il CSS e aggiungi la classe toollet-motion a un elemento HTML. Usa l'esempio d'uso HTML insieme al CSS.
Utile quando
Crea un'animazione di entrata
Usa un preset di dissolvenza in entrata o di ingresso dal basso per regolare il movimento e la velocità di entrata.
Movimento quando si interagisce con un pulsante
Cambia la condizione di avvio in passaggio del mouse o focus da tastiera per creare un movimento che risponde all'interazione.
Capire i keyframe e le condizioni di riproduzione
Stati intermedi e durata
Il % di un keyframe è la sua posizione all'interno di 1 riproduzione. Per un'animazione di 1 secondo, 50% corrisponde a 0,5 secondi. L'easing determina come cambiano i valori tra i keyframe.
Spostamento, rotazione e aspetto
La posizione orizzontale/verticale è la quantità di spostamento dalla posizione originale. Una scala di 1 è la dimensione originale; un'opacità di 0 è trasparente e 1 è opaco.
Ritardo, ripetizione e direzione
Il ritardo viene aggiunto una sola volta prima dell'inizio della riproduzione. Per una riproduzione finita, il tempo totale è ritardo + durata di 1 riproduzione × numero di ripetizioni. Alternato scambia la direzione in avanti e indietro.
Stati prima e dopo la riproduzione
Scegli quale stato appare durante il ritardo e dopo la fine della riproduzione. Le impostazioni di direzione inversa e alternata cambiano le posizioni dei keyframe usate all'inizio e alla fine della riproduzione.
Impostazione di riduzione del movimento
Il CSS generato supporta l'impostazione di riduzione del movimento del dispositivo. Ferma l'animazione e usa lo stato finale determinato dalla direzione e dal numero di ripetizioni configurati. Per la riproduzione infinita usa il punto finale della prima riproduzione.
Domande frequenti
Posso riprodurla una sola volta?
Disattiva «Continua a ripetere» e imposta il numero di ripetizioni su 1. I preset standard iniziano con 1 riproduzione, mentre rotazione e fluttuazione iniziano con la ripetizione continua attiva.
A quale elemento devo applicare il CSS?
Aggiungi la classe toollet-motion a un elemento HTML e usala insieme al CSS generato. L'esempio d'uso HTML è un frammento di un elemento button, non una pagina web completa e autonoma.
Quanti keyframe posso creare?
Puoi avere da 2 a 8 keyframe, inclusi l'inizio a 0% e la fine a 100%. Aggiungendo un keyframe viene inserito nel punto intermedio dell'intervallo più ampio. Inizio e fine non possono essere eliminati e sono fissi solo nella loro posizione in %.
L'anteprima è sparita dopo aver cambiato un'impostazione.
I risultati vengono cancellati quando le impostazioni cambiano, così non usi per errore movimenti o codice delle impostazioni precedenti. Genera di nuovo per controllare le impostazioni attuali.
Perché l'anteprima non si muove?
Il movimento si ferma quando la riduzione del movimento è attiva sul tuo dispositivo. Per le impostazioni di hover e focus controlla anche le condizioni di avvio. L'anteprima si mette in pausa quando passi a un'altra scheda.
Posso usare più animazioni nella stessa pagina?
I nomi della classe e del keyframe generati sono condivisi. Per usare animazioni separate, cambia entrambi i nomi per ogni animazione e riporta le modifiche nell'HTML corrispondente.
Input e risultati
- Impostazioni
- 12 preset, da 2 a 8 keyframe e una durata da 0,2 a 60 secondi.
- Riproduzione
- Un ritardo da 0 a 60 secondi, da 1 a 100 ripetizioni o ripetizione infinita, easing, direzione, stati prima e dopo la riproduzione e condizioni di avvio.
- Output
- CSS e un esempio d'uso HTML. Viene definito solo il movimento; non viene creata una pagina web completa né un file video.