Using CSS for a fade-in effect on page load

Question

Can CSS transitions be used to allow a text paragraph to fade-in on page load?

I really like how it looked on http://dotmailapp.com/ and would love to use a similar

Answer 1

You can use the onload="" HTML attribute and use JavaScript to adjust the opacity style of your element.

Leave your CSS as you proposed. Edit your HTML code to:

    

        
​This is a test
    

This also works to fade-in the complete page when finished loading:

HTML:

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Check the W3Schools website: transitions and an article for changing styles with JavaScript.