page-transitions.style — Bringing back Internet Explorer’s Page Transitions

Overview

Relive the late-90s web with all 23 classic PowerPoint-inspired revealTrans transitions — from Box in, Circle out, and Vertical blinds to Checkerboard, Random dissolve, and Random bars — rebuilt with modern CSS and the View Transition API.

Video Showcase

✨ Try Interactive SPA Demo ↓ 🧭 Try Cross-Document MPA Demo ↓

🎬 All 23 + 1 Classic Effects

Implements every single RevealTrans transition from 0 (Box in) through 22 (Random bars vertical), plus 23 (Random selection).

🏷️ Original `<meta>` Syntax

Configured using the exact same <meta http-equiv="Page-Enter" content="revealTrans(...)"> markup from Internet Explorer 4.0–8.0.

🔗 Sequential Exit + Entry

Unlike IE—where combining an exit and an entry transition conflicted and aborted—both effects run seamlessly one after the other.

⚡ SPA & MPA Support

Works with both Cross-Document View Transitions (MPA) and Same-Document View Transitions (SPA) in modern browsers.

🎨 Configurable via CSS

Customize blind bands, checkerboard grid dimensions, dissolve pixel size, bar thickness, and backdrop colors via CSS Custom Properties.

🕰️ IE 5.5–8.0 compatible!

Because it uses the original <meta> tags, MPA pages also trigger the native DirectX Page Transitions when opened in Internet Explorer 5.5–8.0.

Internet Explorer’s Page Transitions

Microsoft Internet Explorer 4.0 and above featured a proprietary feature called Interpage Transitions. It allowed authors to specify a transition effect to apply to the entire browser window as a web page was loaded or exited.

Transitions were specified using a <meta> tag in the <head> of a web page. Four events could create instances of interpage transitions: Page-Enter, Page-Exit, Site-Enter, and Site-Exit.

DirectX ImageTransform Filter Syntax HTML

For example, the following snippet caused the Blinds transition to play when the user loaded the page and caused a Slide transition to play when the user exited the page:

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=4)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />

The feature worked best as of Microsoft Internet Explorer 5.5, which had a richer variety of optimized filters. The feature was eventually deprecated with the release of Windows Internet Explorer 9.

The `RevealTrans` Filter

The Page Transitions feature also came with a shorthand — the DXImageTransform.Microsoft.RevealTrans Filter — which offered 23 predefined transitions mirrored from the slide transitions found in Microsoft PowerPoint.

Using one of these predefined effects was as easy as referring to its number — ranging from 0 to 22 — in the revealTrans filter’s Transition property. Using the value 23 randomly selected one of the 23 available effects.

RevealTrans Shorthand Example Transition=7 (Wipe left)

Under the hood, revealTrans(Transition=7)—a vertical wipe from right to left—mapped to a DXImageTransform.Microsoft.Blinds(direction='left', bands=1) effect:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=7)">

All 23 + 1 RevealTrans Transition Effects 0 – 23

#	Name	Description	DXImageTransform Equivalent
`0`	Box in	Rectangle towards centre	`DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in')`
`1`	Box out	Rectangle from centre outwards	`DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out')`
`2`	Circle in	Circle towards centre	`DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in')`
`3`	Circle out	Circle from centre outwards	`DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out')`
`4`	Wipe up	Horizontal wipe from bottom to top	`DXImageTransform.Microsoft.Blinds(direction='up', bands=1)`
`5`	Wipe down	Horizontal wipe from top to bottom	`DXImageTransform.Microsoft.Blinds(direction='down', bands=1)`
`6`	Wipe right	Vertical wipe from left to right	`DXImageTransform.Microsoft.Blinds(direction='right', bands=1)`
`7`	Wipe left	Vertical wipe from right to left	`DXImageTransform.Microsoft.Blinds(direction='left', bands=1)`
`8`	Vertical blinds	Vertical blinds from left to right	`DXImageTransform.Microsoft.Blinds(direction='right')`
`9`	Horizontal blinds	Horizontal blinds from top to bottom	`DXImageTransform.Microsoft.Blinds(direction='down')`
`10`	Checkerboard across	Box blinds from left to right	`DXImageTransform.Microsoft.CheckerBoard(direction='right')`
`11`	Checkerboard down	Box blinds from top to bottom	`DXImageTransform.Microsoft.CheckerBoard(direction='down')`
`12`	Random dissolve	Pixel fade	`DXImageTransform.Microsoft.RandomDissolve`
`13`	Split vertical in	Vertical window opening from middle to sides	`DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in')`
`14`	Split vertical out	Vertical window closing from sides to middle	`DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out')`
`15`	Split horizontal in	Horizontal window opening from middle to top/bottom	`DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in')`
`16`	Split horizontal out	Horizontal window closing from top/bottom to middle	`DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out')`
`17`	Strips left down	New content is revealed from the upper left corner to the lower right	`DXImageTransform.Microsoft.Strips(motion='leftdown')`
`18`	Strips left up	New content is revealed from the lower left corner to the upper right	`DXImageTransform.Microsoft.Strips(motion='leftup')`
`19`	Strips right down	New content is revealed from the upper right corner to the lower left	`DXImageTransform.Microsoft.Strips(motion='rightdown')`
`20`	Strips right up	New content is revealed from the lower right corner to the upper left	`DXImageTransform.Microsoft.Strips(motion='rightup')`
`21`	Random bars horizontal	Vertical line fade	`DXImageTransform.Microsoft.RandomBars(orientation='horizontal')`
`22`	Random bars vertical	Horizontal line fade	`DXImageTransform.Microsoft.RandomBars(orientation='vertical')`
`23`	Random	Randomly selects one of the 23 effects above	—

How This Library Works

ie-page-transitions reads the <meta http-equiv="Page-Enter"> and <meta http-equiv="Page-Exit"> tags from your document and translates them into Selective View Transitions with Active Types (such as page-enter-effect-7 and page-enter-duration-0_5).

The stylesheet (ie-page-transitions.css) uses the :active-view-transition-type() pseudo-class to animate ::view-transition-old(root) and ::view-transition-new(root) using modern CSS features including clip-path polygons, multi-layer mask-image gradients, registered custom properties (@property), and CSS @keyframes.

Combining Exit and Entry Transitions

In Internet Explorer it was not possible to have one page define an exit transition and the other page an entry transition. When having both an exit and entry effect, the two would conflict, resulting in no transition happening at all. This library does not have that limitation: when both an exit and entry effect are set, they run sequentially one after the other.

Installation

Install ie-page-transitions from NPM or load the files directly from a CDN.

Install via NPM Terminal

npm install ie-page-transitions

Load via CDN URLs

unpkg: https://unpkg.com/ie-page-transitions/ + path/to/file.ext
jsDelivr: https://cdn.jsdelivr.net/npm/ie-page-transitions/ + path/to/file.ext
Skypack: https://cdn.skypack.dev/ie-page-transitions/ + path/to/file.ext
esm.sh: https://esm.sh/ie-page-transitions/ + path/to/file.ext

MPA Usage (Cross-Document)

Follow these three steps to enable IE Page Transitions across same-origin multi-page navigations.

1. Enable Cross-Document View Transitions CSS

<style>
    @view-transition {
        navigation: auto;
    }
</style>

2. Include Stylesheet & Render-Blocking Script HTML

Note: The script must be loaded as a module and must be set to block rendering (blocking="render").

<link rel="stylesheet" href="https://unpkg.com/ie-page-transitions/ie-page-transitions.css">
<script src="https://unpkg.com/ie-page-transitions/ie-page-transitions.mpa.js" type="module" blocking="render"></script>

3. Add the <meta> Tag(s) HTML

<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=23)">

SPA Usage (Same-Document)

Use ie-page-transitions.spa.js to trigger IE Page Transitions during same-document DOM updates.

1. Include Stylesheet, Meta Tags & Optional First-Load Init HTML

<link rel="stylesheet" href="https://unpkg.com/ie-page-transitions/ie-page-transitions.css">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=23)">

<!-- Optional: Run Page-Enter transition on initial page load -->
<script type="module" blocking="render">
    import { init } from 'https://unpkg.com/ie-page-transitions/ie-page-transitions.spa.js';
    init();
</script>

2. Call startViewTransition(callback) JavaScript

import { startViewTransition } from 'https://unpkg.com/ie-page-transitions/ie-page-transitions.spa.js';

$linkToNextPage.addEventListener('click', (e) => {
    e.preventDefault();
    startViewTransition(updateTheDOMSomehow);
});

Effect Configuration

Just like in Internet Explorer, transitions are configured via the attributes of the <meta> tag:

Set http-equiv to either Page-Enter or Page-Exit to define whether this is a page entry or page exit animation.
Set Duration to define the duration in seconds for the effect (supported values: 0.5, 1.0, 1.5, and 2.0).
Set Transition to an integer from 0 to 22 to pick a specific transition, or 23 to randomly select one of the 23 effects.

Example: 2-Second Random Dissolve on Page Entry Transition=12

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)">

CSS Custom Properties

Several effects and the backdrop between sequential exit/entry transitions can be customized by setting CSS Custom Properties on the :root element:

Available Custom Properties :root

Custom Property	Default	Applies To	Description
`--page-transitions-backdrop-color`	`transparent`	Exit + Entry	Controls the `background-color` of the `::view-transition` backdrop between sequential exit and entry effects.
`--page-transitions-blinds-bands`	`6`	Effects `8` & `9`	Controls the number of vertical or horizontal blind bands.
`--page-transitions-checkerboard-columns`	`10`	Effects `10` & `11`	Controls the number of checkerboard columns across.
`--page-transitions-checkerboard-rows`	`10`	Effects `10` & `11`	Controls the number of checkerboard rows down.
`--page-transitions-random-dissolve-size`	`4px`	Effect `12`	Controls the size of each dissolved pixel.
`--page-transitions-random-bars-size`	`4px`	Effects `21` & `22`	Controls the thickness of each random bar.

Browser Support

Requires a browser with built-in Page Transitions support or support for the View Transition API + Selective View Transitions with Active Types.

⚡ SPA (Same-Document)

Chrome 125+
Safari 18.2+
Firefox 147+

🧭 MPA (Cross-Document)

Internet Explorer 5.5 – 8.0 (built-in)
Chrome 126+
Safari 18.2+

1. SPA Playground

Interactive Single-Page Application demo. Use the floating control bar at the bottom of the preview window to choose an Exit Effect and/or Entry Effect, then click Go! to transition between the 4 dynamic content views.

2. MPA Navigation

Multi-Page Application demo using Cross-Document View Transitions. Click any of the effect links inside the preview to navigate to a new page, then use the browser UI’s Back (←) and Forward (→) buttons (or the in-page links) to navigate back and forth.