Animaciones

Microinteracciones con keyframes

Solo transform/opacity, con easing y duración bien calibrados.

Checklist

Checklist de animaciones

Movimiento suave y legible

  • Anima transform/opacity; evita propiedades que afecten el layout.
  • Mantén loaders por debajo de ~1.4s y loops entre 6–12s.
  • Aplica stagger de 60–120ms en listas para dar profundidad.

Demo

Micro float

Desplazamiento en Y + opacidad

@keyframes float {
  0%,100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-12px); opacity: 0.85; }
}

Patrones

Casos de uso

Badges, loaders y marquee

Badge tipo pill

Punto deslizante para estado activo

.pill::after { animation: slide 2.4s ease-in-out infinite; }

Marquee

TranslateX en loop

.marquee { animation: ticker 14s linear infinite; }