Transitions Only After Page Load

The Problem: Unwanted Transitions on Page Load

When you apply CSS transitions to elements on your page, the browser treats the initial page render as a state change. As the browser calculates layout and applies styles, elements transition between their default states and their styled states, causing unintended animations.

Why This Happens

• Browser renders elements in their initial state
• CSS transitions detect the property changes during layout
• Elements animate from default to styled values
• This occurs before users have a chance to interact

Common scenarios where this occurs:

• Collapsible navigation menus with transition effects
• Cards that fade in on hover
• Any element with transitions on structural properties like width, height, opacity
• Sidebar transitions or expanding/collapsing elements

This issue is well-documented in the web development community, with the original solution pioneered by Chris Coyier on CSS-Tricks. For more foundational CSS knowledge, see our guide on CSS Flexbox to understand how layout properties interact with transitions.

The Solution: Preload Class Technique

The most reliable approach to prevent unwanted transitions on page load is to add a class to the body element that disables all transitions, then remove that class once the page has fully loaded. This simple technique gives you full control over when animations begin.

How It Works

1. Add a "preload" class to body in HTML
2. CSS disables transitions when this class is present
3. JavaScript removes the class after page load
4. Transitions work normally after the class is removed

This technique ensures that CSS transitions only trigger when users intentionally interact with elements, not during the initial page render. When implementing this technique alongside other CSS features, be aware of how it interacts with pseudo-class selectors and other state-based styling approaches.

The HTML

The preload class acts as a global switch that disables transitions across all elements on the page.

The CSS

This CSS targets all elements within the preload class and disables their transitions and animations. The !important declarations ensure the rules take precedence over other styles, as recommended in the modern vanilla JavaScript approach.

The JavaScript

The load event fires after the entire page has loaded, including images and other resources. This ensures transitions are only enabled once everything is ready. This approach differs from DOMContentLoaded because it waits for all resources, not just HTML parsing.

Advanced CSS Considerations

Pseudo-Elements and Transitions

One important limitation to note is that the * selector does not target pseudo-elements. If your design uses transitions on :before and :after, you'll need to target them explicitly:

.preload *::before,
.preload *::after {
 transition: none !important;
 animation-duration: 0.001s !important;
}

Transition Property vs. Shorthand

The shorthand transition property covers all transition-related properties:

/* Shorthand - covers all */
transition: all 0.3s ease;

/* Individual properties */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;

For disabling transitions, the shorthand is sufficient and more concise. According to MDN's documentation on CSS transitions, the shorthand is the recommended approach for most use cases. For more insights into CSS properties and their interactions, explore our guide on stuff you can do with CSS pointer events.

Alternative Approaches

Using transition-delay

One approach is to delay all transitions:

.element {
 transition: all 0.3s ease 0.3s;
}

However, this affects user interactions too, not just page load.

CSS View Transitions API

Modern browsers support the View Transitions API:

@media (prefers-reduced-motion: no-preference) {
 ::view-transition-group(*) {
 animation-duration: 0.3s;
 }
}

This API provides more control but has varying browser support.

Using visibility Instead of Display

For elements that should be hidden initially:

.element {
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s;
}

.element.loaded {
 visibility: visible;
 opacity: 1;
}

This approach avoids transition issues by using opacity for the fade effect. When working with overflow properties and transitions, be sure to review our comprehensive guide on the CSS overflow property.

Performance Best Practices

When to Remove the Preload Class

The window.load event is the most reliable trigger because it fires after:

• HTML has been parsed
• CSS has been applied
• Images have loaded
• Scripts have executed

This ensures no unexpected transitions occur during any phase of page loading.

Avoiding Layout Thrashing

For complex pages with many transitions:

• The preload technique is lightweight
• No performance cost during page load
• Minimal JavaScript overhead
• Only one class manipulation on load

Accessibility Considerations

Users who prefer reduced motion should have transitions disabled:

@media (prefers-reduced-motion: reduce) {
 * {
 transition: none !important;
 animation: none !important;
 }
}

This complements the preload technique by respecting user preferences and improving accessibility for users who experience motion sensitivity.

Complete Implementation Example

Here's a complete, working example that you can use as a starting point for your projects.

Summary

Preventing CSS transitions from firing on page load is essential for professional, polished user experiences. The preload class technique provides a reliable, well-supported solution that works across all modern browsers:

1. Add class="preload" to the body element
2. Use CSS to disable transitions when this class is present
3. Remove the class with JavaScript after the page fully loads

This approach gives you complete control over when animations begin, ensuring they only enhance user interactions rather than creating unwanted visual effects during page load.

By following this technique, you'll create smoother, more professional web experiences that feel intentional and polished. For more advanced CSS techniques, explore our guides on CSS Flexbox, the CSS overflow property, and pseudo-class selectors.