I'm having trouble getting a CSS fade-in effect to work on page load. I've seen it on a few websites and I'd like to implement it on my own project. The effect should make a text paragraph smoothly transition from invisible to fully visible when the page is loaded. I've set up the initial CSS to make the text element invisible and I've applied a transition rule to it aiming for that fade-in effect. However, I'm not certain how to properly trigger this transition on page load. Here's the current CSS I'm working with:


And here's the basic HTML markup:


Any advice on how to get this transition to trigger as soon as the page is done loading would be appreciated.

To have your fade-in effect on page load, you need to set the final state of your element after the page has loaded. Since you want to trigger a transition, we will need to change the opacity from 0 to 1. This can be done using a small snippet of JavaScript that adds a class to your paragraph once the window's 'load' event fires. Here's how you can do it:
First, add a new class `.fade-in` to your CSS:


Then, add this JavaScript code:


Now, when the DOM is fully loaded, the JavaScript will execute, adding the `fade-in` class to your paragraph and triggering the CSS opacity transition.

I see. So the JavaScript will trigger the transition as soon as the DOM is finished loading. However, your code is waiting for `DOMContentLoaded`, not the `window` load event. Is there a reason for that distinction?

Good catch. The `DOMContentLoaded` event fires when the initial HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The `window` load event, however, waits for the whole page to load. In this case, using `DOMContentLoaded` should be sufficient to trigger the fade-in effect, but if you want to be sure that all the resources are loaded, you can replace `DOMContentLoaded` with the `load` event like this:


Here's your updated, properly formatted CSS and JavaScript, ready to use:
CSS:


JavaScript:


This snippet should go within a script tag before the closing body tag in your HTML or in an external file that you link to your HTML.