CSS Keyframe Animation Studio
Generar animacions CSS suaus per a flot, pulsar, rebentar, sacsejar i girar amb control de la durada i fotogrames clau.
S'executa al teu navegador. Els fitxers mai no surten del dispositiu. Mira com comprovar-ho
…
Com es fa
- 1Pas 1: obre CSS Keyframe Animation Studio i introdueix les teves dades
Escriu els teus nombres o text, afegeix el fitxer o tria les opcions que necessites. No es puja res: tot es queda al teu navegador.
- 2Pas 2: què fa CSS Keyframe Animation Studio
Generar animacions CSS suaus per a flot, pulsar, rebentar, sacsejar i girar amb control de la durada i fotogrames clau.
- 3Pas 3: llegeix el resultat i compara'l
El resultat apareix a l'instant. Canvia un valor per veure com varia la resposta i queda't amb la xifra que s'adapti al teu cas.
- 4Pas 4: copia'l o desa'l
Copia el resultat o descarrega'l. Per a una decisió important, confirma'l amb la font oficial o amb un assessor.
Sobre aquesta eina
Breathe life into buttons, hero badges, notification icons, and loading indicators. Choose from popular UI animation presets including Gentle Float, Attention Pulse, Playful Bounce, Error Shake, and Infinite Spin. Adjust playback duration in seconds and copy production-ready CSS keyframe code.
Consells per obtenir el millor resultat
Abans de començar, dedica un moment a llegir les opcions i prova l'eina primer amb un exemple petit. Tot s'executa al navegador del teu dispositiu; res del que escrius o afegeixes es puja i tancar la pestanya ho esborra tot. Si alguna cosa no et sembla bé, recarrega la pàgina i torna-ho a provar, o fes servir l'enllaç d'informe d'aquesta pàgina per dir-nos què ha anat malament. Si un resultat continua semblant erroni, canvia un valor cada vegada per veure quin camp influeix més. Afegeix aquesta pàgina als preferits si la tornaràs a fer servir.
En resum
- Categoria: Imatges
- S'executa al navegador, sense registre, sense pujar res.
- La informació que introdueixes es queda al dispositiu.
- Disponible en molts idiomes.
- Contingut revisat per última vegada:
Preguntes freqüents
Són aquestes animacions CSS accelerades per maquinari?
Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.
Puc ajustar la velocitat de l'animació?
Yes. The duration slider allows you to speed up or slow down animations from 0.5 seconds to 4.0 seconds in real time.
Com puc activar l'animació només amb el cursor?
In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).
Això requereix alguna biblioteca JavaScript?
Les animacions generades són 100% CSS pur, requereixen zero overhead JavaScript.