Much of a website's personality lives in the moments between things: between clicking a photo and seeing it large, between one page and the next. On a basic site those moments are a hard cut, a white flash and a new page. On a premium site they are a handoff, where what you clicked visibly carries you to where you are going.
This guide covers why those transitions matter, four styles worth using with a live example beside each, how long a transition should take, and when to leave them out entirely.
Why transitions matter
Transitions keep people oriented. When the photo you clicked grows into the detail view, you read it as the same object in the same space, and you never have to work out where you are. A hard cut forces a small reset every time, and across a whole visit those resets add up to a site that feels harder to use than it is.
They also shape how a brand feels. A considered transition is the digital version of a door that closes softly, and visitors read it as quality even if they could never name it. A short transition can also cover a brief load, so a wait reads as movement instead of a blank screen. The rule is that it must never add a wait of its own. It is one of the details that make a website look premium.
1. The shared element transition
The page records exactly where the image sits, moves that same element into the detail layout and animates the difference. The photograph is never duplicated or swapped. It simply travels and grows while the rest of the rail clears out of the way, and closing runs it all in reverse.
This is the most useful transition there is, because it explains itself. It suits portfolios, product pages, property listings and menus, anywhere a visitor goes from a thumbnail to the full story. The care is in the detail: both layouts have to be designed together, or the travel looks like a jump.
2. The trail transition
Clicking a thumbnail sends a short trail of copies along an arc to the full size image, each copy wiping in and out on a stagger. The eye reads one picture travelling across the screen, and the detail panel arrives behind it on the opposite side.
It is more expressive than a plain shared element and suits fashion, art and editorial brands that want each click to feel like an event. It is also easy to overdo. Keep the trail short and the timing quick, because a transition people notice every single time soon becomes one they wait for.
3. The masked preview
Hover a product and it grows into a full preview through a masked reveal while the rest of the shop dims around it. Both layers share one grid, so the change never jumps. It feels like the same object stepping forward, not a new page loading.
This suits shops and catalogues where people compare many items, because they can look closely without losing their place. Phones have no hover, so the same reveal needs to run on a tap, and that version should be planned from the start rather than added later.
4. The soft fade between pages
The simplest transition is a quick cross fade between pages, with the header holding still so only the content changes. It removes the white flash of a normal page load and costs almost nothing to run, because only opacity changes.
Modern browsers include a View Transitions API that animates between page states natively, and a browser without it simply loads the page as normal, so nothing breaks. For most business websites a soft fade is the right default: calm, quick and invisible to everyone except the people who would have noticed the flash.
How long should a page transition take?
Short enough that nobody waits for it. Nielsen Norman Group puts most interface animations between about 100 and 500 milliseconds, with larger movements toward the top of that range. A hover or a small fade sits near the bottom. A photo travelling across the whole screen sits near the top. Past half a second, people start waiting for the animation instead of watching it.
The visitor should also be able to act straight away. If someone clicks again in the middle of a transition, the site should respond rather than finish its performance first. Transitions that block input are the ones that get a site described as slow.
When should you leave transitions out?
Checkout, forms, login and anywhere people are completing a task should be fast and still. The back button should feel instant. And anyone with the reduce motion setting turned on should get a simple fade or a direct change.
A useful test is to use the site ten times in a row. A transition that still feels good on the tenth visit is doing its job. One that felt slow by the third should be shortened or removed. For more on where movement earns its place, read why modern websites use scroll animations and eight scroll animation effects for premium websites.