design
Gratis
Sin registro
Generador de códigos QR
Cree animaciones CSS @keyframes visualmente con vista previa en vivo, controles de temporización y editor de atenuación cubic-bezier.
Cargando la herramienta…
Acerca de esta herramienta
Diseñe animaciones CSS sin escribir una sola línea de código. Elija entre los tipos de animación Desvanecimiento, Deslizamiento, Rebote, Rotación, Escala, Sacudida, Volteo, Pulso, Balanceo o Personalizado, luego ajuste la duración, el retraso, el número de iteraciones, la dirección y el fill-mode. Elija una función de atenuación — incluyendo una curva cubic-bezier editable arrastrando — y vea el elemento animado actualizarse en tiempo real. El bloque @keyframes generado y el atajo de animación están listos para copiar directamente en su hoja de estilos.
Cómo usar
- 1 Seleccione un tipo de animación del menú desplegable (por ejemplo, Rebote, Desvanecimiento, Rotación).
- 2 Ajuste la configuración de temporización: duración, retraso, número de iteraciones, dirección y fill-mode.
- 3 Elija una función de atenuación o arrastre los manejadores cubic-bezier para crear una curva personalizada.
- 4 Copie el CSS generado del panel de código y péguelo en su hoja de estilos.
Preguntas frecuentes
Herramientas relacionadas