Tutorial

How To Create a Fade-In Page Transition Effect with JavaScript and CSS

Step-by-step guide to creating a fade in page transition using vanilla JavaScript and CSS opacity transition, with code examples and accessibility tips.

Drake Nguyen

Founder · System Architect

• Feb. 25, 2026, 12:09 a.m. • 3 min read

Introduction

A subtle page transition improves perceived performance and polish. This guide shows how to build a simple, accessible fade in page transition using vanilla JavaScript and CSS. You will learn how to apply a fade class to the body, trigger a CSS opacity transition, and remove that class when the document is ready.

Prerequisites

Basic familiarity with HTML, CSS, and JavaScript.
Understanding of classList methods (add, remove) is helpful but optional.

Step 1 — CSS: opacity and transition

Start by defining a CSS rule that transitions the opacity property. The .fade class sets the initial state to transparent (opacity 0). When the class is removed, the browser animates opacity to 1 using the transition property. This produces a smooth fade in effect.

<style>
/* Default visible state */
body {
  opacity: 1;
  transition: opacity 0.7s ease;
}

/* Initial hidden state to apply on page load */
body.fade {
  opacity: 0;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}
</style>

Step 2 — Add the fade class before rendering

Insert a small script immediately after the opening <body> tag so the page starts with the fade class applied. This ensures the page begins transparent and the transition runs once you remove the class.

<body>
  <script>
    // Apply the fade class on initial parse. Safe for pages without existing classes:
    document.body.classList.add('fade');
  </script>
  <!-- page content goes here -->
</body>

Step 3 — Remove the fade class on DOMContentLoaded

Listen for the DOMContentLoaded event to know when the DOM is ready. Removing the fade class triggers the CSS opacity transition so the page fades in. Using classList.remove preserves any other classes on the body.

<script>
// Wait until DOM is ready, then remove the fade class to start the transition.
document.addEventListener('DOMContentLoaded', function () {
  // A small timeout can help ensure the class was painted before removal
  window.setTimeout(function () {
    document.body.classList.remove('fade');
  }, 50);
});
</script>

Variants and tips

Using className: If your body has no other classes you can set document.body.className = 'fade' and later clear it with document.body.className = '', but classList is safer when other classes exist.
Delay length: Adjust the timeout and transition-duration to control the feel of the page load fade in effect.
Accessibility: Honor prefers-reduced-motion to turn off transitions for users who opt out of animations.
Single page applications: For SPA navigation, apply and remove the fade class around route changes to create smooth page transition effects between views.
Detecting load vs DOM ready: DOMContentLoaded is usually the best place to trigger a page load fade in because it fires earlier than the load event and is sufficient for most content-driven transitions.

Example: full minimal page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Fade In Page</title>
  <style>
    body { opacity: 1; transition: opacity 0.7s ease; }
    body.fade { opacity: 0; }
    @media (prefers-reduced-motion: reduce) { body { transition: none; } }
  </style>
</head>
<body>
  <script>document.body.classList.add('fade');</script>

  <main>
    <h2>Hello</h2>
    <p>This page uses a fade in page transition javascript + css pattern.</p>
  </main>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      window.setTimeout(function () { document.body.classList.remove('fade'); }, 50);
    });
  </script>
</body>
</html>

Conclusion

Using a simple combination of CSS opacity transition and a small JavaScript hook is an effective way to add a fade in page transition javascript approach to your site without frameworks. This pattern—apply a fade class, then remove it on DOMContentLoaded—works well for basic pages and can be adapted for single page application transitions or accessibility-conscious implementations.

Keywords covered: fade in page transition javascript, fade in effect css, javascript page transition, css opacity transition, DOMContentLoaded event, add remove class javascript.