View Transitions API and Speculation Rules API

Modern web APIs enable instant page loads with smooth animations. The View Transitions API creates animated transitions between pages. The Speculation Rules API preloads pages before users navigate. Together, they deliver app-like experiences in multi-page websites.

The benefit: Users see polished animations while pages load instantly. Navigation feels seamless rather than jarring.

View Transitions API

The View Transitions API animates changes between page states. Instead of content appearing instantly, browsers can smoothly transition between old and new content.

How It Works

When you navigate between pages:

1. Browser captures a snapshot of the current page
2. Browser loads the new page
3. Browser captures a snapshot of the new page
4. CSS animations transition between snapshots
5. New page becomes visible

Basic Setup

Enable transitions for all navigation:

1@view-transition {
2  navigation: auto;
3}

Creating Animations

Define animations for outgoing and incoming pages:

 1@keyframes flip-out {
 2  0% {
 3    opacity: 1;
 4    transform: rotateY(0deg) scale(1);
 5  }
 6  100% {
 7    opacity: 0;
 8    transform: rotateY(180deg) scale(0.8);
 9  }
10}
11
12@keyframes flip-in {
13  0% {
14    opacity: 0;
15    transform: rotateY(-180deg) scale(0.8);
16  }
17  100% {
18    opacity: 1;
19    transform: rotateY(0deg) scale(1);
20  }
21}
22
23::view-transition-old(flip) {
24  animation: 300ms ease-out forwards flip-out;
25}
26
27::view-transition-new(flip) {
28  animation: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards flip-in;
29}

Key pseudo-elements:

• ::view-transition-old(): Styles the outgoing page
• ::view-transition-new(): Styles the incoming page

Named Transitions

Target specific elements with view-transition-name:

1.navigation-button {
2  view-transition-name: flip;
3}

The browser animates only elements with matching view-transition-name values between pages.

Respecting User Preferences

Disable transitions for users who prefer reduced motion:

1@media (prefers-reduced-motion: reduce) {
2  @view-transition {
3    navigation: none;
4  }
5}

Speculation Rules API

The Speculation Rules API tells browsers which pages to load before users navigate. This eliminates waiting time when users click links.

Two Loading Modes

Prerender: Fully loads and executes the page in the background. Navigation becomes instant but consumes more resources.

Prefetch: Downloads only the HTML. Reduces load time with minimal resource cost.

Configuration

Add speculation rules in a <script type="speculationrules"> tag:

1<script type="speculationrules">
2  {
3    "prerender": [
4      {
5        "urls": ["next-page.html"]
6      }
7    ]
8  }
9</script>

For prefetch instead:

1<script type="speculationrules">
2  {
3    "prefetch": [
4      {
5        "urls": ["next-page.html"]
6      }
7    ]
8  }
9</script>

When to Use Each Mode

Use prerender for:

• Next/previous buttons in sequences
• High-confidence navigation paths
• Single critical next steps

Use prefetch for:

• Related pages users might visit
• Multiple possible destinations
• Memory-constrained scenarios

Resource Costs

Prerender:

• Loads HTML, CSS, JavaScript, images
• Executes all JavaScript
• Highest memory and CPU usage

Prefetch:

• Downloads only HTML
• No JavaScript execution
• Minimal resource usage

Best Practices

Limit prerender targets: Browsers ignore excessive hints. Prerender 1-2 pages maximum.

Choose high-confidence links: Only prerender pages users will likely visit.

Monitor in DevTools: Verify speculation rules work as expected in Chrome DevTools Network panel.

Respect user context: Browsers may disable speculation on slow connections or low-memory devices.

Using Both APIs Together

View Transitions and Speculation Rules complement each other. Speculation Rules make pages instantly available. View Transitions animate the change.

Add speculation rules to your page head:

1<script type="speculationrules">
2  {
3    "prerender": [
4      {
5        "urls": ["page2.html"]
6      }
7    ]
8  }
9</script>

Enable view transitions in your CSS:

1@view-transition {
2  navigation: auto;
3}
4
5.btn {
6  view-transition-name: flip;
7}

When users click the link to page2.html, the page loads instantly and animates smoothly.

Browser Support

View Transitions API:

• Chrome 111+
• Edge 111+
• Safari 18+
• Opera 97+

Speculation Rules API:

• Chrome 121+
• Edge 121+

Check Can I Use for updated support information.

Implementation Checklist

• Enable view transitions in CSS
• Define animations for page transitions
• Add speculation rules to HTML
• Test prerender hints in DevTools
• Verify animations respect reduced-motion preferences
• Limit prerender targets to 1-2 pages
• Use prefetch for exploratory navigation
• Test on supported browsers

Next Steps

Start with View Transitions on a single page transition. Add Speculation Rules after confirming animations work. Monitor browser DevTools to verify speculation rules execute correctly.