모션 사전

카드를 지우면 카드가 오른쪽 화면 밖으로 200ms 동안 미끄러져 나가게 해 줘. 빠르기는 ease-in(예: cubic-bezier(0.4, 0, 1, 1))으로 천천히 출발해 빨라지며 나가게 하고, 다 나간 뒤 아래 카드들이 위로 올라오게 해 줘. prefers-reduced-motion이면 미끄러지지 말고 바로 사라지게 해 줘.

필터 버튼을 누르면 아래에서 바텀 시트가 250ms 동안 올라오게 해 줘. 빠르기는 ease-out(예: cubic-bezier(0, 0, 0.2, 1))으로 빠르게 올라와 끝에서 부드럽게 멈추게 하고, 닫을 때는 200ms ease-in으로 내려가게 해 줘. prefers-reduced-motion이면 움직임 없이 나타나게 해 줘.

장바구니 담기 버튼을 누르면 장바구니 아이콘의 숫자 배지가 0.6배에서 1배로 커지는데, 스프링으로 살짝 넘쳤다(약 1.15배) 돌아오며 멈추게 해 줘. 강도와 감쇠는 0.4초 안에 멈출 정도로 하고, CSS면 linear() 곡선으로 근사해 줘. prefers-reduced-motion이면 넘치지 않고 바로 커지게 해 줘.

출석 보상 화면에서 동전 아이콘이 위에서 떨어져 바닥에 닿으면 세 번 점점 작게 튕긴 뒤 멈추게 해 줘. 전체 0.8초, 첫 튕김 높이는 떨어진 높이의 1/4 정도로 해 줘. 이 움직임은 보상 화면 한 곳에만 쓰고, prefers-reduced-motion이면 튕기지 않고 바로 자리에 나타나게 해 줘.

저장하면 화면 아래에 '저장했습니다' 토스트가 150ms 페이드 인으로 나타나고, 3초 뒤 200ms 페이드 아웃으로 사라지게 해 줘. 자리는 움직이지 말고 opacity만 바꾸고, 사라진 뒤에는 화면 읽기에서도 빠지게(aria-live 영역은 남기고 내용만 비우기) 해 줘.

왼쪽 위 메뉴 버튼을 누르면 왼쪽에서 폭 280px 서랍 메뉴가 250ms ease-out으로 미끄러져 들어오고, 뒤 화면은 반투명하게 어두워지게 해 줘. 바깥을 누르거나 Esc를 누르면 왼쪽으로 200ms ease-in으로 나가게 하고, 열려 있는 동안 초점이 메뉴 안에 머물게 해 줘.

검색 결과 카드가 나타날 때 카드마다 아래에서 12px 올라오며 페이드 인하게 하고, 시작을 50ms씩 늦춰 위에서부터 차례로 나타나게 해 줘. 하나는 250ms ease-out으로, 늦추는 건 앞의 6개까지만 하고 나머지는 6번째와 함께 나타나게 해 줘. prefers-reduced-motion이면 모두 함께 페이드만 해 줘.

사진 카드 목록에서 카드를 누르면 그 카드가 제자리에서 화면 전체 크기로 커지며 상세 화면이 되게 해 줘. 300ms ease-out으로 모서리 둥글기도 함께 0으로 바뀌게 하고, 닫기를 누르면 같은 길을 거꾸로 작아져 원래 카드 자리로 돌아가게 해 줘. 열린 뒤에는 초점을 상세 제목으로 옮겨 줘.

상품 목록의 썸네일을 누르면 상세 화면 맨 위 큰 사진으로 그 썸네일이 300ms ease-out으로 커지며 옮겨 가게 해 줘. 웹이면 두 화면의 사진에 같은 view-transition-name을 주고 document.startViewTransition으로 바꾸고, 나머지 내용은 페이드로 바꿔 줘. 뒤로 가면 큰 사진이 다시 목록의 썸네일 자리로 돌아오게 해 줘.