Generador de CSS Keyframes — Animaciones @keyframes y Curvas de Easing
Crea animaciones @keyframes con movimiento, rotación y escala, y ajusta el easing en una línea de tiempo cubic-bezier visual
Crea animaciones CSS `@keyframes` de rebote, desvanecido o vibración moviendo controles deslizantes, y copia el código listo para usar.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Ajusta el nombre de la animación, la duración, el desplazamiento en el eje Y y el valor de escala.
- Observa la animación de la caja en tiempo real y copia el código CSS generado.
Preguntas frecuentes
- ¿Cómo lo aplico en mi HTML?
- Solo pega la regla `@keyframes` copiada junto con la clase CSS en la hoja de estilos de tu sitio.
- ¿Puedo ajustar yo mismo la curva de easing cubic-bezier?
- Sí, arrastra los puntos de control en el gráfico de la línea de tiempo para dar forma a la aceleración y desaceleración como quieras, y esos valores se reflejan directamente en el código CSS.
- ¿Puedo configurar un bucle infinito o reproducción inversa?
- Sí, define el número de repeticiones (incluido infinito) y la opción alternate/inversa, y se generan automáticamente los valores correspondientes de animation-iteration-count y animation-direction.