Accordion Expand-Collapse (아코디언 펼치기 / 접기)

레이아웃이 바뀌면 요소들이 새 위치와 크기로 부드럽게 미끄러져 갑니다.

[적용할 곳]에 FLIP 레이아웃 애니메이션(FLIP Layout Animation)을 넣어 줘. 레이아웃 애니메이션(layout animation), First-Last-Invert-Play라고도 불러.
레이아웃이 바뀌면 각 요소가 툭 튀지 않고 이전 위치에서 새 위치로 미끄러지듯 이동하게 해 줘. 처음엔 빠르게, 끝에서는 부드럽게 자리 잡도록.
매 프레임 레이아웃이 다시 계산되지 않게 transform만으로 애니메이션하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 새 레이아웃으로 바꿔 줘.

사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.

[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.

떠 있는 메뉴가 트리거가 있는 지점에서 커지며 서서히 나타납니다.

[적용할 곳]에 팝오버 / 드롭다운 오픈(Popover / Dropdown Open) 애니메이션을 넣어 줘. 메뉴 팝(menu pop), 드롭다운 스케일 페이드(dropdown scale-fade)라고도 불러.
메뉴가 트리거 옆 모서리에서 살짝 커지면서 서서히 나타나게 해 줘. 빠르고 깔끔하게 열리고, 닫힐 때는 조금 더 빠르게 사라지게.
트리거에 붙어 있게 하고, Escape 키나 바깥 클릭으로 닫히게 하고, 열린 상태를 트리거에서 스크린 리더에 알려 줘.

오버레이 뒤로 반투명한 어두운 막이 서서히 나타나 페이지를 어둡게 가립니다.

[적용할 곳]에 백드롭 스크림 페이드(Backdrop Scrim Fade)를 넣어 줘. 오버레이 페이드(overlay fade), 스크림(scrim)이라고도 불러.
오버레이가 열리면 뒤쪽 페이지 위로 반투명한 어두운 막이 부드럽게 나타나되 오버레이보다 조금 느리게 나타나고, 닫힐 때 다시 사라지게 해 줘.
라이트·다크 테마 모두에서 스크림은 어둡게 유지하고, 보이는 동안에는 뒤쪽 페이지가 스크롤되거나 클릭되지 않게 해 줘.

패널이 아래 가장자리에서 밀려 올라오며, 끌어서 정해진 높이에 맞출 수 있는 경우가 많습니다.

[적용할 곳]에 바텀 시트 슬라이드 업(Bottom Sheet Slide-Up)을 넣어 줘. 바텀 드로어(bottom drawer), 시트(sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 아래 가장자리에서 밀려 올라오고, 튕김 없이 부드럽게 감속하며 자리를 잡게 해 줘.
시트가 열릴 때마다 한 번 재생하고, 닫을 때는 다시 아래로 내려가게 하고, 열려 있는 동안 키보드 포커스가 시트 안에 머물게 해 줘.

슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.

[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.