# Fade-In Page Transitions

> Fades each page in as it loads and gently out when visitors follow a link to another page on your site. Turned off for people who prefer reduced motion, and pages never stay hidden if JavaScript fails.

- Type: HTML
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: frontend, css, animation, javascript
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/fade-in-page-transitions/

## Code

```html
<style>
/* The fade-in is pure CSS, so pages stay visible even when JavaScript is off or fails. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes wpide-page-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    body {
        animation: wpide-page-fade-in .4s ease-out backwards;
    }
    html.wpide-page-leaving body {
        opacity: 0;
        transition: opacity .2s ease-in;
    }
}
</style>
<script>
(function () {
    var FADE_OUT_MS = 200; // Fade out before following a link. Set to 0 to only fade in.

    if (!FADE_OUT_MS || !window.matchMedia || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        return;
    }

    var root = document.documentElement;
    var skipFiles = /\.(jpe?g|png|gif|webp|avif|svg|pdf|zip|rar|7z|mp3|mp4|mov|webm|docx?|xlsx?|pptx?|csv|txt)$/i;

    // Listening on window runs after other click handlers, so links they take over are left alone.
    window.addEventListener('click', function (event) {
        if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
            return;
        }

        var link = event.target && event.target.closest ? event.target.closest('a[href]') : null;

        if (!link || (link.target && link.target !== '_self') || link.hasAttribute('download') || link.closest('.no-fade, [data-no-fade]')) {
            return;
        }

        var url = new URL(link.href, location.href);

        if (url.origin !== location.origin || !/^https?:$/.test(url.protocol)) {
            return;
        }

        if (url.hash && url.pathname === location.pathname && url.search === location.search) {
            return;
        }

        if (skipFiles.test(url.pathname) || /[?&](add-to-cart|download)=/.test(url.search)) {
            return;
        }

        event.preventDefault();
        root.classList.add('wpide-page-leaving');

        setTimeout(function () {
            location.href = url.href;
        }, FADE_OUT_MS);

        // Show the page again if the navigation does not happen.
        setTimeout(function () {
            root.classList.remove('wpide-page-leaving');
        }, 3000);
    });

    // Pages restored with the Back button come back visible.
    window.addEventListener('pageshow', function (event) {
        if (event.persisted) {
            root.classList.remove('wpide-page-leaving');
        }
    });
})();
</script>
```

## Notes

Links that open a new tab, downloads, files, same-page anchors and add-to-cart links are skipped. Add the class no-fade to a link (or a parent element) to skip it. Set FADE_OUT_MS to 0 to keep only the fade-in. The fade-in can delay Largest Contentful Paint slightly; shorten the .4s duration if that matters to you.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fade-In Page Transitions" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/