Crea animazioni CSS keyframe con preimpostazioni, temporizzazione e controlli di iterazione
Un generatore di animazioni CSS ti lascia costruire animazioni a keyframe in modo visivo — scegliendo un effetto, impostando il timing, l'easing e quante volte si ripete — poi copiare il CSS, inclusa la regola @keyframes e la proprietà animation. Le animazioni CSS muovono un elemento attraverso una sequenza di stati definiti come keyframe, e scriverle a mano significa destreggiarsi con le percentuali dei keyframe, la durata, la funzione di timing e le impostazioni di iterazione tutte insieme. Scegliere tra preset e regolare i controlli trasforma tutto questo in pochi clic.
Le parti che plasmano come si sente un'animazione sono la durata, la funzione di timing e il numero di iterazioni. La durata imposta la velocità; la funzione di timing (ease, linear, ease-in-out e curve personalizzate) controlla come il movimento accelera e decelera, ed è ciò che separa un'animazione dall'aspetto naturale da una robotica; e il numero di iterazioni decide se viene riprodotta una volta o in loop. Vedere l'effetto in anteprima dal vivo mentre regoli questo è molto più rapido che modificare valori e ricaricare. Questo strumento genera CSS basato su standard nel browser, pronto da incollare su qualsiasi elemento.
Una regola @keyframes definisce le fasi di un'animazione come percentuali da 0% a 100%, ciascuna specificando lo stile dell'elemento a quel punto. Il browser interpola dolcemente tra esse, quindi da 0% { opacity: 0 } a 100% { opacity: 1 } produce una dissolvenza in entrata. Il generatore scrive questa regola per te.
La funzione di timing controlla come varia la velocità dell'animazione lungo la sua durata. linear si muove a ritmo costante, mentre ease, ease-in-out e le curve cubic-bezier personalizzate accelerano e decelerano. L'easing giusto è ciò che rende il movimento naturale invece che meccanico, quindi influisce molto sul risultato.
Imposta animation-iteration-count su infinite, che la fa ripetere continuamente — usato per spinner, pulsazioni ed effetti ambientali. Un numero specifico la ripete quel numero di volte, e il valore predefinito di 1 la riproduce una volta. Il generatore espone questo così puoi scegliere una singola riproduzione o un loop senza fine.
Sì — le animazioni a keyframe CSS sono ampiamente supportate dai browser moderni. Girano anche in modo efficiente perché il browser può ottimizzarle, e degradano con eleganza: se l'animazione non è supportata o ridotta, l'elemento appare semplicemente nel suo stato finale invece di rompersi.
Generatore ombra box CSS · Generatore raggio bordo CSS · Generatore Flexbox · Generatore CSS Grid · Generatore ombra testo CSS · Generatore filtri CSS