Constructor de animaciones

Elige una animación prediseñada (fade, slide, bounce, pulse, shake…), ajusta duración, retraso, easing e iteraciones, y copia los @keyframes y la clase lista para usar.

¿Cómo funcionan las animaciones CSS?

Una animación CSS tiene dos partes:

1. @keyframes: los fotogramas clave. Describes cómo se ve el elemento en distintos momentos (from/to o porcentajes como 0%, 50%, 100%) y el navegador calcula todo lo intermedio.
2. animation: aplica esos keyframes a un elemento y define cómo se reproducen.

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tarjeta {
  /* nombre | duración | easing | retraso | repeticiones | dirección | fill-mode */
  animation: aparecer 0.6s ease-out 0.2s 1 normal both;
}

Propiedad	Qué controla
animation-duration	Cuánto dura un ciclo (0.6s, 300ms).
animation-timing-function	El ritmo: ease, linear, cubic-bezier(), steps().
animation-delay	Cuánto espera antes de empezar.
animation-iteration-count	Cuántas veces se repite (infinite = siempre).
animation-direction	reverse la invierte; alternate va y vuelve.
animation-fill-mode	forwards conserva el estado final; backwards aplica el inicial durante el retraso; both ambos.

Generador

Elige un preset arriba, ajusta los controles y pulsa Reproducir para verla de nuevo. También puedes editar los keyframes a mano.

Constructor de animaciones

Nombre de la animación DuraciónsRetraso (delay)s

Ritmo

Easing (timing-function) easelinearease-inease-outease-in-outcubic-bezier (personalizado)steps (por pasos) Repetir infinitamente

Dirección normalreversealternatealternate-reversefill-mode noneforwardsbackwardsboth

@keyframes

0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); }

Edita los fotogramas clave libremente: porcentajes (0%, 50%, 100%) o from / to.

Elemento de muestra CuadradoBotónTextoTarjeta

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animado {
  animation: bounce 1.2s ease infinite;
}

/* Equivalente con propiedades individuales:
  animation-name: bounce;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
*/

/* Respeta a quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .animado {
    animation: none;
  }
}

Consejos de uso

• Anima sólo transform y opacity siempre que puedas: el navegador los mueve con la tarjeta gráfica y la animación se ve fluida incluso en celulares. Animar width, top o margin provoca saltos.
• Para animaciones de entrada (fadeIn, slideInUp…) usa fill-mode: both; así el elemento no "parpadea" visible antes de que empiece el retraso.
• Escalona elementos de una lista con retrasos crecientes (0.1s, 0.2s, 0.3s…) para un efecto profesional.
• Las duraciones de interfaz suelen ir de 150 ms a 600 ms. Más de 1 segundo se siente lento salvo en animaciones decorativas.
• alternate + infinite crea un vaivén suave sin escribir el camino de regreso en los keyframes.
• Ajusta el ritmo con una curva propia en el editor de cubic-bezier.

Accesibilidad

Algunas personas se marean con el movimiento. El código generado incluye @media (prefers-reduced-motion: reduce) para desactivar la animación si su sistema lo pide. No lo borres.

Error común

Si tu animación de transform "borra" otra transformación del elemento (por ejemplo, un translate(-50%, -50%) para centrarlo), es porque transform se reemplaza completo. Incluye ambas en cada keyframe o envuelve el elemento en otro contenedor.