File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// ─────────────────────────────────────────────────────────────────────────────
// 모션 토큰 — 지속시간과 이징.
// 이징은 "어느 방향으로 움직이는가"로 이름 붙인다: 화면에 들어올 때는 감속(out),
// 나갈 때는 가속(in), 제자리에서 상태만 바뀔 때는 in-out.
//
// 실제 트랜지션·애니메이션은 `_mixins.scss`의 `transition()` / `animate()`를 쓴다 —
// 두 믹스인 모두 `prefers-reduced-motion` 분기를 내장하고 있어 감소 모션 환경
// 대응을 화면마다 되풀이할 필요가 없다.
// ─────────────────────────────────────────────────────────────────────────────
$duration: (
instant: 0ms,
fast: 120ms,
base: 200ms,
slow: 300ms,
slower: 500ms
);
$easing: (
linear: linear,
in: cubic-bezier(0.4, 0, 1, 1),
out: cubic-bezier(0, 0, 0.2, 1),
in-out: cubic-bezier(0.4, 0, 0.2, 1),
// 살짝 오버슈트 — 토글·체크 같은 작은 확인 동작에.
spring: cubic-bezier(0.34, 1.56, 0.64, 1)
);