Motion
모션 시스템
인터랙션의 easing curve와 duration. 5개 easing과 6개 duration을 기본 vocabulary로 둔다.
Default
easing.standard
cubic-bezier(0.4, 0, 0.2, 1)Decelerate
easing.decel
cubic-bezier(0.0, 0, 0.2, 1)Bounce
easing.bounce
cubic-bezier(0.16, 1, 0.3, 1)duration-instant0ms즉시 반응
duration-fast150ms색상 변화, 보더 hover
duration-base200ms기본 트랜지션
duration-slow300ms크기 변화, 슬라이드 인
duration-slower400ms모달 등장
duration-slowest600ms페이지 전환, 큰 시각 변화