Generador de Animaciones CSS

Crea animaciones CSS @keyframes de forma visual. Define keyframes, timing y easing con vista previa en vivo.

Cómo funciona: Define keyframes con transforms y opacidad. Ajusta timing, easing y duración. Previsualiza tu animación en vivo y copia el CSS.

0%25%50%75%100%

@keyframes fadeIn {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: fadeIn 0.8s ease 0s 1 normal forwards;
}

¿Qué son las animaciones CSS?

Las animaciones CSS permiten animar elementos HTML sin JavaScript. Usando reglas @keyframes, defines los estilos en varios puntos durante la secuencia de animación. El navegador interpola suavemente entre keyframes, creando transiciones fluidas para transforms, opacidad, colores y más.

Cómo usar el generador de animaciones

Elige un preset o comienza desde cero. Agrega keyframes en porcentajes específicos (0% a 100%) y configura los valores de transform y opacidad para cada uno. Ajusta la duración de la animación, función de timing, delay y cantidad de iteraciones. Previsualiza la animación en tiempo real y copia el CSS generado cuando estés satisfecho.

Funciones de timing de animación

La función de timing controla la curva de velocidad de la animación. 'ease' comienza lento, acelera y luego desacelera. 'linear' mantiene velocidad constante. 'ease-in' comienza lento y acelera. 'ease-out' comienza rápido y desacelera. Para curvas personalizadas, usa cubic-bezier() con cuatro puntos de control.

Mejores prácticas de animación CSS

  • Prefiere transform y opacity para animaciones — están aceleradas por GPU y no provocan recálculo de layout
  • Usa will-change con moderación para indicar al navegador sobre animaciones próximas
  • Mantén las animaciones bajo 300ms para feedback de UI, 500ms-1s para transiciones
  • Usa la media query prefers-reduced-motion para respetar configuraciones de accesibilidad
  • Evita animar width, height, top, left — usa transform: translate() en su lugar
  • Usa animation-fill-mode: forwards para mantener el estado final después de la animación