How can I create a CSS fade-in effect on page load for a paragraph?

General Discussions
1

I’m trying to apply a CSS fade-in effect to a text paragraph when the page loads. I have the following markup:

This is a test

And here’s the CSS I’m using:

test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; transition: opacity 2s ease-in; } The transition is defined, but it doesn’t automatically trigger when the page loads.

What’s the proper way to make this fade-in effect happen as soon as the page loads, without using JavaScript if possible? Should I be toggling a class or using a body.loaded type of approach with CSS animations instead? Looking for the cleanest solution using pure CSS, if achievable.