🎬 Constructor de Keyframes CSS
Diseña animaciones de keyframes CSS en segundos — ajusta transform y opacity en cada parada, previsualiza la animación en vivo y copia el código @keyframes listo para pegar. Sin instalación ni registro, funciona completamente en tu navegador.
Acerca de
El Constructor de Keyframes CSS te permite crear animaciones @keyframes sin escribir ni una sola línea de código a mano. Defines las propiedades transform — translate (X e Y), scale y rotate — más opacity en tres paradas clave: 0%, 50% y 100%. La duración de la animación, una función de temporización (ease, linear, ease-in, ease-out, ease-in-out o un cubic-bezier personalizado) y el número de repeticiones (finito o infinite) son todos configurables en el panel. Una vista previa animada en vivo se actualiza al instante para que puedas ajustar los valores hasta que el movimiento se sienta perfecto. Cuando estés listo, haz clic en Copiar y el bloque @keyframes completo — incluida la propiedad abreviada animation — se copia al portapapeles listo para pegar en tu hoja de estilos. Todo funciona en el navegador sin subir archivos ni enviar datos a ningún lado.
Cómo usar
- Establece los valores de transform — translate X/Y, scale y rotate — y opacity para la parada del 0% (el inicio de la animación).
- Ajusta los valores de la parada del 50% para definir el punto medio del movimiento, o déjalos en el valor predeterminado para crear una transición simple de dos estados.
- Establece los valores de la parada del 100% para el estado final y luego configura la duración (en segundos), la función de temporización y el número de repeticiones.
- Observa cómo se actualiza la vista previa en tiempo real y ajusta cualquier valor hasta que la animación se vea exactamente como deseas.
- Haz clic en Copiar CSS para copiar el bloque @keyframes completo y la propiedad animation a tu portapapeles, y luego pégalo directamente en tu hoja de estilos.
Preguntas frecuentes
- ¿Qué propiedades transform puedo animar?
- Puedes animar translateX, translateY, scale y rotate, además de opacity. Cada propiedad se establece de forma independiente en las paradas de keyframe 0%, 50% y 100%.
- ¿Qué funciones de temporización están disponibles?
- El constructor incluye los presets ease, linear, ease-in, ease-out y ease-in-out, además de una opción cubic-bezier personalizada para que puedas crear una curva de aceleración única.
- ¿Puedo hacer que la animación se repita indefinidamente?
- Sí. Establece el número de repeticiones en Infinite y el CSS generado usará animation-iteration-count: infinite, haciendo que la animación se repita de forma continua.
- ¿Necesito saber CSS para usar esta herramienta?
- No. El constructor es completamente visual: simplemente mueve los controles deslizantes y selecciona valores de los menús desplegables. El CSS se genera automáticamente y está listo para copiar en cualquier proyecto.
- ¿El CSS generado es compatible con todos los navegadores modernos?
- Sí. La salida usa @keyframes estándar y la propiedad abreviada animation, que son compatibles con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge sin ningún prefijo de proveedor.