How page transition time adds up
A page transition is made of two segments: the exit animation of the screen that leaves and the enter animation of the screen that arrives. Overlapping them shortens the total but keeps both screens on screen at once; playing them in sequence simply adds the durations. Enter your own numbers and this tool returns the total perceived time and a segment timeline.
How it is calculated
Overlap = exit duration x overlap share. Enter start = delay + exit duration - overlap. Total = whichever ends later, the exit or the enter. As of October 2026 the W3C CSS specifications and the web accessibility guidelines do not set a recommended transition duration in ms. Because no official value exists, this tool proposes none and only adds up what you enter.
Limits
Easing curves, rendering and network latency and dropped frames are not part of the result, and the tool does not judge whether a duration is appropriate. Respect prefers-reduced-motion by offering a reduced or disabled transition path, and confirm the final numbers on real devices.
Frequently Asked Questions
The exit and the enter start at the same moment, so the total equals the longer of the two. Both screens stay visible the whole time, so check that the layout does not shift during the overlap.
No. There is no official recommended ms value, so this tool does not propose one. You enter your own numbers and it compares the total and the timeline.
Use the transition-delay shown for the incoming screen and set each animation duration to the exit and enter values you entered. The timeline is reproduced exactly.