Using CSS for a fade-in effect on page load

css css-transitions opacity

1,416,913

Solution 1

Method 1:

If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation

Method 2:

Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:

jQuery

$("#test p").addClass("load");

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load";

Demo

http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions

Method 3:

Or, you can use the method that .Mail uses:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support

jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.

Solution 2

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:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>

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

HTML:

<body onload="document.body.style.opacity='1'">
</body>

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.

Solution 3

In response to @A.M.K's question about how to do transitions without jQuery. A very simple example I threw together. If I had time to think this through some more, I might be able to eliminate the JavaScript code altogether:

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>

1,416,913

Author by

user1556266

Updated on July 08, 2022

Comments

user1556266 almost 2 years

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 effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed on the Wayback Machine.

Illustration

Having this markup:

<div id="test">
    <p>This is a test</p>
</div>

With the following CSS rule:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

How can the transition be triggered on load?

Rob almost 12 years

CSS3 Animation is supported just fine by every modern browser around. Of course, IE is not a modern browser.
A.M.K almost 12 years

Yes, but what if you want/need to be backwards compatible to IE6? In that case I think that jQuery is the best option. But, the asker wants it in CSS so I posted it as an alternative.
Rob almost 12 years

In addition (not tested) you should be able to use the transition property without jQuery to achieve the same effect.
Om Shankar over 11 years

Changed your fiddle to a bulge bounce - (and Webkit only ) jsfiddle.net/OMS_/GcWt7
jeroen over 10 years

I think you have an error in the Method 3 code. It should be: $("#test p").delay(1000).animate({opacity: 1}, 700); > opacity not wrapped in "".
A.M.K over 10 years

@jeroen Either method works but you're right. I've edited my answer.
Jonathan. about 10 years

Isn't it best to set the initial opacity to 0 in javascript? That way if the user has javascript disabled the element is just there instead of never appearing.
A.M.K about 10 years

@Jonathan You're right, that should definitely be changed. Although I should, most of the time I don't think about how things are for javascript-disabled users, it's all cross-browser and responsive. I don't have time right now, but I'll see if I can update it later.
Jonathan. about 10 years

@A.M.K I tried doing "fix" that just in the javascript but didn't manage to, so in the end I created a separate css file with opacity: 1 !important; and put in a <noscript> element.
Șerban Ghiță about 9 years

Brilliant answer! How hard is to apply the animation via $("#test p").addClass("load"); multiple times? Doing $("#test p").removeClass('load').addClass("load"); doesn't do the job since the animation has already stopped. Can I trigger a restart from JavaScript?
A.M.K about 9 years

@serbanghita I haven't had to deal with that recently, but if I remember correctly you have to trigger a repaint before calling addClass. You should be able to do that by querying a property like outerWidth. But, since the method uses transitions you'll also need to remove them before removing the class and then reattach them before adding it back.
Nickfmc about 9 years

NOTE - for moz-keyframes you need to write it as @--moz-keyframes
Jet59black about 8 years

How would you implement the "falling" effect into this? Where the fading-in image looks like it's falling while it fades in?
A.M.K about 8 years

@Juniper747 You could do that a number of ways. The first ones to come to mind are to move the element via transformations (the best for animations) or adjust the background position.
Jeppe almost 6 years

Great answer. Alternatively I guess you can set the onload directly on the element. Like <div id="test" onload="this.style.opacity='1'">. Not sure if it means the event is triggered before the entire body is loaded though.
Samuel Ramzan over 4 years

CSS3 is the best of all, no need for frameworks and fully compatible, besides, It's like a little absurd to be worried about IE6 when less than 5% of the market share uses IE 6,7,8,9 or whatever...
Hashim Aziz about 4 years

This needs a 2020 update. Is all of that CSS in Method 1 really still necessary?
Hashim Aziz about 4 years

Never mind, I just read your comments in the code. I suppose all that's realistically needed nowadays is the non-prefixed animation for all browsers?