Motion Design Guide

Duration Guidelines

Duration	Use Case
50–100ms	Micro-interactions: hover states, button press, toggle
100–200ms	UI feedback: checkbox, tooltip appear, menu item highlight
200–300ms	Simple transitions: dropdown open, card flip, expand
300–500ms	Page elements: modal open, sidebar slide, hero animation
500–1000ms	Complex transitions: page transition, onboarding step
>1000ms	Loading states, storytelling animations only

Easing Functions (hover rows to demo)

ease (default)

Slow start, fast middle, slow end

ease-in

Slow start (exit animations)

ease-out

Slow end (enter animations)

ease-in-out

Smooth both ends (modal, drawer)

linear

Constant speed (loaders, spinners)

CSS Animation Reference

/* Fade in from bottom */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 300ms ease-out both;
}

/* Smooth entrance for modals */
.modal {
  animation: scaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Skeleton loading shimmer */
@keyframes shimmer {
  to { background-position: 200% center; }
}
.skeleton {
  background: linear-gradient(90deg, #1c2035 25%, #2a2f4a 50%, #1c2035 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Motion Design Principles

✅ Purposeful — Every animation should communicate something, not just decorate
✅ Responsive — Animations should respond instantly to input (<100ms)
✅ Natural — Use ease-out for entering elements (deceleration feels natural)
✅ Consistent — Same motion system across the entire product
❌ Don't animate everything — use motion sparingly to preserve meaning
❌ Respect prefers-reduced-motion media query for accessibility

Motion Design Guide

Duration Guidelines

Easing Functions (hover rows to demo)

CSS Animation Reference

Motion Design Principles

Ferramentas relacionadas