F-06 · Foundation

Motion

Природні easings, скромні durations, осмислений stagger. Завжди шанує prefers-reduced-motion.

Easings

Hover the row → bar runs across with the named easing.

--ease-out

cubic-bezier(0.16, 1, 0.3, 1) · default · 90% case

→
--ease-in-out

cubic-bezier(0.65, 0, 0.35, 1) · symmetric · page transitions

→
--ease-spring

cubic-bezier(0.34, 1.56, 0.64, 1) · slight overshoot · success states only

→
linear · уникати

Тільки для progress bars / loaders

→

Durations

TokenЧасКейс
--dur-instant80mstooltip show
--dur-fast140mshover, focus, color changes
--dur-med240msmodal open, card expand
--dur-slow360mspage elements reveal
--dur-page480msroute transitions (View Transitions API)

Stagger reveal

Перезавантажте сторінку, щоб побачити входження.

1

First

2

Second

3

Third

/* CSS */
.reveal    { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.reveal.d1 { animation-delay: 80ms; }
.reveal.d2 { animation-delay: 160ms; }
.reveal.d3 { animation-delay: 240ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

Reduced motion

/* respect user preference — tokens become 0ms */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-med:     0ms;
    --dur-slow:    0ms;
    --dur-page:    0ms;
  }
}

Усі animations все одно показують end state — лише без переходу. Жодні decorative anims не залежать від ефекту.