모션 애니메이션 레퍼런스

이징 토큰

토큰CSSCompose easeStandardcubic-bezier(0.4, 0, 0.2, 1)FastOutSlowInEasing easeDeceleratecubic-bezier(0.16, 1, 0.3, 1)CubicBezierEasing(0.16f, 1f, 0.3f, 1f) easeOvershootcubic-bezier(0.175, 0.885, 0.32, 1.275)CubicBezierEasing(0.175f, 0.885f, 0.32f, 1.275f) easeOvershootStrongcubic-bezier(0.34, 1.56, 0.64, 1)CubicBezierEasing(0.34f, 1.56f, 0.64f, 1f)

지속시간 토큰

토큰값용도 fast300ms버튼, 패널 전환 medium500ms팝업, 버블 normal600ms슬라이드인, 스케일 slow800ms퍼즐 조립, 카드 진입 verySlow1500~2000ms경로 그리기, 레이더 ambient3000~5000ms플로팅, 펄스

핵심 애니메이션 매핑

• Dash 변형(morphExpand): 4s, standard easing -> AnimatedContent + SizeTransform
• Dash 통신 파티클: 2s, ease-in-out -> infiniteRepeatable offset 애니메이션
• 레이더 스캔: 2s linear -> infiniteRepeatable rotation
• 채팅 팝: 500ms, overshoot -> tween with CubicBezierEasing
• 퍼즐 조립: 800ms, strong overshoot -> staggered tween
• 슬라이드 다운: 600ms, decelerate -> tween with custom easing