푸시는 두 화면이 **같은 속도로 같은 방향**으로 움직이는 전환입니다. 새 화면의 앞 모서리가 기존 화면의 뒤 모서리에 붙어서 밀고 가므로, 사용자는 화면들이 가로로 길게 이어진 띠 위를 이동한다고 느낍니다. iOS 의 내비게이션 스택(목록 → 상세)이 대표 예시이고, 키노트·파워포인트의 슬라이드 전환 이름으로도 쓰입니다.
방향이 곧 의미입니다. 오른쪽에서 들어오면 "앞으로(더 깊이)", 왼쪽에서 들어오면 "뒤로"를 뜻하도록 일관되게 쓰세요. 이름이 비슷한 **커버(→ cover-transition)** 는 기존 화면이 안 움직이고, **리빌(→ reveal-transition)** 은 새 화면이 안 움직인다는 점이 다릅니다.
CSS 로는 두 화면에 같은 `translateX` 를 주면 됩니다. 한 화면이 다른 화면보다 느리면 푸시가 아니라 시차(패럴랙스) 효과가 됩니다.
언제 쓰나
위계가 있는 이동(목록 → 상세, 다음 단계)에 쓰세요. 같은 레벨의 탭 전환에는 푸시보다 페이드가 덜 어지럽습니다.