Animations

Micro-motion with keyframes

Transform/opacity only, tuned easing and duration.

Checklist

Animation checklist

Smooth, readable motion

  • Animate transform/opacity; avoid layout-affecting props.
  • Keep loaders under ~1.4s, loops 6–12s.
  • Stagger lists by 60–120ms for depth.

Demo

Micro float

Y-translate + opacity

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

Patterns

Use cases

Badges, loaders, marquee

Pill badge

Sliding dot for active state

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

Marquee

Looping translateX

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