Motion

모션은 유저 인터페이스의 표현력을 높이고 쉽게 사용할 수 있도록 도와줍니다.

매크로 / 마이크로 모션

매크로 모션은 전체적인 레이아웃이나 페이지 전환과 같은 큰 규모의 모션을 의미합니다. 예를 들어 페이지 전환, 모달 팝업, 슬라이드 메뉴 등이 있습니다.

마이크로 모션은 작은 규모의 모션을 의미합니다. 예를 들어 버튼 클릭, 입력창 포커스, 스크롤 등이 있습니다.

마이크로 모션은 0.2초 이하의 시간을 가지며, 매크로 모션은 0.2초를 초과합니다.

버튼 클릭, 입력창 포커스, 등의 기능적인 마이크로 모션에 사용합니다.

다이얼로그, 시트 등이 나타나는 매크로 모션에 사용합니다.

다이얼로그, 시트 등이 사라지는 매크로 모션에 사용합니다.

enter, exit 모션에서 특히 강조되어야 하는 움직임에 사용합니다.

이름	값
$timing-function.linear	cubic-bezier(0, 0, 1, 1)
$timing-function.easing	cubic-bezier(0.35, 0, 0.35, 1)
$timing-function.enter	cubic-bezier(0, 0, 0.15, 1)
$timing-function.exit	cubic-bezier(0.35, 0, 1, 1)
$timing-function.enter-expressive	cubic-bezier(0.03, 0.4, 0.1, 1)
$timing-function.exit-expressive	cubic-bezier(0.35, 0, 0.95, 0.55)