페이지 전환 시간은 어떻게 합산될까
페이지 전환은 나가는 화면의 퇴장 애니메이션과 들어오는 화면의 진입 애니메이션 두 구간으로 이루어집니다. 두 구간을 겹치면 총 시간이 줄지만 겹치는 동안 두 화면이 함께 보이고, 겹치지 않으면 시간이 그대로 더해집니다. 이 도구는 직접 정한 퇴장·진입 시간과 겹침 비율을 넣으면 총 체감 시간과 구간별 타임라인을 계산합니다.
계산 방식
겹침 구간 = 퇴장 시간 × 겹침 비율, 진입 시작 = 지연 + 퇴장 시간 − 겹침 구간, 총 시간 = 퇴장 종료와 진입 종료 중 더 늦은 쪽입니다. 2026년 10월 기준 W3C 의 CSS 명세와 웹 접근성 지침은 전환 지속 시간의 권장 ms 값을 정하고 있지 않습니다. 공인된 권장값이 없으므로 이 도구는 값을 제안하지 않고 입력한 수치만 합산합니다.
한계
이징 곡선에 따른 체감 차이, 렌더링·네트워크 지연, 프레임 드롭은 계산에 넣지 않습니다. 또한 권장 지속 시간 판정은 지원하지 않습니다. 모션에 민감한 사용자를 위해 prefers-reduced-motion 을 존중해 전환을 줄이거나 끄는 경로를 함께 두고, 최종 값은 실제 기기에서 확인하세요.
자주 묻는 질문
퇴장과 진입이 같은 시각에 시작해 총 시간은 둘 중 긴 쪽이 됩니다. 두 화면이 끝까지 함께 보이므로 겹치는 동안 레이아웃이 어긋나지 않는지 확인하세요.
공인된 권장 ms 값이 없어 이 도구는 제시하지 않습니다. 직접 정한 값을 넣어 총 시간과 타임라인을 비교하는 용도입니다.
진입 화면에 표시된 transition-delay 값을 그대로 쓰고, 각 애니메이션 duration 에 입력한 퇴장·진입 시간을 넣으면 같은 타임라인이 재현됩니다.