jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de Animaciones CSS Keyframes

Genere animaciones CSS @keyframes listas para usar con nueve patrones de movimiento predefinidos. Elija entre fade, slide, scale, spin, pulse, bounce y shake.

Cargando herramienta...

Qué es Generador de Animaciones CSS Keyframes?

El Generador de Animaciones CSS Keyframes crea reglas @keyframes completas y propiedades animation shorthand a partir de patrones de movimiento predefinidos.

Respuesta rápida

Elija entre nueve ajustes preestablecidos de animación y personalice duración, easing, retraso, iteración, dirección y modo de llenado. Obtenga una regla @keyframes completa.

Last updated: 2026-06-11

Limitaciones

  • La regla @keyframes usa sintaxis from/to.
  • La herramienta genera una animación a la vez.
  • La vista previa usa un elemento estático.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione un ajuste preestablecido: Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce o Shake.
  2. Personalice los parámetros: duración, easing, retraso, número de iteraciones, dirección y modo de llenado.
  3. Edite el nombre de la animación si es necesario.
  4. Observe la vista previa en vivo. Haga clic en Replay para reiniciar.
  5. Copie la salida completa al su hoja de estilos.

Para qué puedes usarla

  • Generar una animación de aparición para un modal con fadeIn y ease-out.
  • Crear una animación de rotación continua para un spinner de carga con Spin.
  • Construir una animación pulse para un botón de llamada a la acción.

Casos de uso

Ejemplos prácticos

Ejemplo

Animación de entrada de notificación toast

Un desarrollador elige Slide Down, duración 0.4s con ease-out y fill-mode forwards.

Ejemplo

Spinner de carga de tablero

Un diseñador UI elige Spin, duración 1.2s con easing lineal e iteración infinita.

Errores comunes

  • Usar animation en lugar de transition para efectos hover simples.
  • Establecer un retraso largo sin fill-mode: backwards.
  • Olvidar probar el rendimiento de animación en dispositivos móviles.

Verificación

  1. Seleccione Fade In. Verifique @keyframes fadeIn con from { opacity: 0 } to { opacity: 1 }.
  2. Seleccione Spin con iteración infinita. Verifique animation: spin 1.5s linear 0s infinite normal.

FAQ

Preguntas sobre Generador de Animaciones CSS Keyframes

Cual es la diferencia entre ease, ease-in, ease-out y linear?

ease comienza lento, acelera y desacelera. ease-in acelera. ease-out desacelera. linear mantiene velocidad constante.

Cuando usar animation-fill-mode: forwards?

Cuando el elemento debe mantener su estado final después de la animación.

Puedo combinar múltiples animaciones en el mismo elemento?

Sí, CSS admite múltiples animaciones separadas por comas.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también