Generador de animación CSS
Opciones
Timing
Playback
Estado
inactivo
Vista previa en vivo
Pulse
¿Qué es el generador de animaciones CSS?
Esta herramienta le ayuda a crear valores abreviados de animación CSS junto con fotogramas clave coincidentes.
Es útil para movimientos de la interfaz de usuario, efectos de desplazamiento, revelaciones de animaciones, tarjetas, botones y experimentos de diseño rápidos.
Cómo utilizar el generador de animaciones CSS
- Elija una animación preestablecida.
- Ajuste la duración, el retraso, la función de sincronización, el recuento de iteraciones, la dirección y el modo de llenado.
- Mire la vista previa en vivo a la derecha.
- Copie la taquigrafía de la animación, los fotogramas clave o la regla CSS completa.
Consejos
- Utilice duraciones más cortas para animaciones sutiles de la interfaz de usuario.
- Utilice iteración infinita para repetir efectos como pulso o rebote.
- Utilice el modo de relleno cuando desee que el elemento mantenga el estado visual inicial o final.
- Combine esto con CSS Transform Generator para obtener efectos de movimiento más avanzados.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de Transform CSS
Genere y analice valores de `transform` CSS como `translate`, `scale`, `rotate`, `skew` y `transform-origin`.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Generador de radio de borde CSS
Genere y analice valores de radio de borde CSS con vista previa en vivo.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Preguntas frecuentes sobre el generador de animación CSS
¿También genera fotogramas clave?
Sí, genera tanto la taquigrafía de la animación como los @keyframes coincidentes.
¿Puedo obtener una vista previa de la animación en vivo?
Sí, la vista previa se actualiza inmediatamente cuando cambia la configuración.
¿Puedo analizar un valor de animación existente?
Sí, pégalo en el área de entrada y haz clic en Analizar.
¿Está la salida lista para la producción?
Sí, puedes copiar el CSS generado y usarlo directamente en tu proyecto.