Products Customers Use cases Search… Log in Sign up

Home
Using CSS for a fade-in effect on page load Ask Question

PUBLIC Asked 7 years, 2 months ago Active 19 days ago Viewed 1.1m times

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

I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS.
Users 404 The domain has since been purchased and no longer has the effect mentioned. An archived copy can Iterating on Inclusion
Jobs be viewed on the Wayback Machine.
C++ Creator Bjarne Stroustrup Answers
Illustration Our Top Five C++ Questions
TEAMS What’s this?

First 10 Free 193 Having this markup: Featured on Meta

<div id="test"> Official FAQ on gender pronouns and

<p>This is a test</p> Code of Conduct changes
</div>

Threshold experiment results: closing,

With the following CSS rule: editing and reopening all become more…

#test p { Would a note about preferred pronouns

opacity: 0; qualify the same way as a “thank you”?
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition:
By using opacity 2s
our site, you acknowledge thatease-in;
you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}

How can the transition be triggered on load?

css css-transitions opacity

share improve this question edited Sep 25 at 17:20 asked Jul 26 '12 at 23:36
Peter Mortensen user1556266
14.5k 19 89 118 2,023 3 10 5

6 You may want to read this: bavotasan.com/2011/a-simple-fade-with-css3 – Edwin Bautista Jul 26 '12 at 23:40

Or this: css-tricks.com/snippets/css/… – raksheetbhat Feb 28 at 13:53 PT.Global Digital Niaga

(Blibli.com)
add a comment
eCommerce

3 Answers active oldest votes We have great benefits!

Inspiring Workplace

Method 1: Personal development and career

advancement opportunities

829 If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't Free Lunch and snacks
supported either, but this is exactly the kind of thing they were made for.
Work with state-of-the-art technology and
equipment
CSS
+ 5 more benefits
text-align: center;
+50 Learn more
-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;
}
71 people chatting

@keyframes fadein { Tamil iOS, Web and Phonegap Developers

from { opacity: 0; } 1 hour ago - jafarbtech
to { opacity: 1; }
}

/* Firefox < 16 */ HTML / CSS / WebDesign

@-moz-keyframes fadein { yesterday - Temani Afif
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein { Linked
from { opacity: 0; }
to { opacity: 1; } 0 fade in and out text using css
}
-1 How can I fade in new HTML elements with
/* Internet Explorer */ CSS
@-ms-keyframes fadein {
from { opacity: 0; } 0 fade transition to a div on load
to { opacity: 1; }
} 247 How to make blinking/flashing text with
CSS 3
/* Opera < 12.1 */
@-o-keyframes fadein { 0 How can I create a fade in/fade out effect
from { opacity: 0; } using only CSS?
to { opacity: 1; }
} -2 How to make background image fade in
with css when page loads?

Demo 0 h1 fade effect using Jquery

http://jsfiddle.net/SO_AMK/VV2ek/ 0 Fade In doesn't work on IE

Browser Support 0 CSS Hover Popup with Fade-in and -out

0 CSS3, HTML5, Javascript: How to make

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

see more linked questions…

Method 2: Related
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class 3185 Set cellpadding and cellspacing in CSS?
on load:
2192 How do I give text or an image a
jQuery transparent background using CSS?

2943 Is there a CSS parent selector?

$("#test p").addClass("load");
3859 Change an HTML5 input's placeholder
color with CSS
CSS
1941 How can I transition height: 0; to height:
auto; using CSS?
#test p {
opacity: 0; 1778 How do CSS triangles work?
font-size: 21px;
margin-top: 25px; 2692 Is it possible to apply CSS to half of a
text-align: center; character?

-webkit-transition: opacity 2s ease-in;

-moz-transition: opacity 2s ease-in; Hot Network Questions
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in; Phrase: the sun is out
transition: opacity 2s ease-in;
} Why can java not infer a supertype

Twelve Labours - #02 Lernaean Hydration

#test p.load {
opacity: 1; Why is the Space Shuttle's External Tank fuelled
} through the Orbiter's main engine plumbing
system?

Plain JavaScript (not in the demo) Which (if any) is the "most major" airport / field /
strip on Antartica?

How do I get softer pictures in sunlight, like in this

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

Articles at the beginning of sentences in scientific

Demo writing

Wood glue versus epoxy for doweling stripped

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

Would fantasy dwarves be able to invent and/or

Browser Support manufacture the radio?

Showing a homeless person that you care about

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

How to get previous command without arrow key

What would you do? Different results than what is

Method 3: reported

Is there a name for the phenomenon of false

Or, you can use the method that .Mail uses: positives counterintuitively outstripping true
positives
jQuery
Response to referee after rejection

Endless disc brake issues

$("#test p").delay(1000).animate({ opacity: 1 }, 700);
What is the purpose of polls published by the
organization that they are asking about which
CSS have leading/confusing questions?

What are the limits of religious freedom in the

#test p { workplace?
opacity: 0;
Is there a general theory of "compactification"?
font-size: 21px;
margin-top: 25px; What kind of mathematical disciplines would be
text-align: center; most useful for physics?
}
Caramel Sauce vs Caramel Syrup

Demo What's the part number of this LEGO element?

RX vs TX operation in Software UART

http://jsfiddle.net/SO_AMK/a9dnW/3/
Which boss in Dark Souls can be buffed by a
Channeler?
Browser Support
Translate "loyal animal" into classical Latin
jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-
support/ Question feed
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.

share improve this answer edited Sep 25 at 17:16 answered Jul 27 '12 at 4:10
Peter Mortensen A.M.K
14.5k 19 89 118 13.4k 3 26 58

138 CSS3 Animation is supported just fine by every modern browser around. Of course, IE is not a modern
browser. – Rob Jul 27 '12 at 13:20

6 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. – A.M.K Jul 27 '12 at 13:22

In addition (not tested) you should be able to use the transition property without jQuery to achieve the same
effect. – Rob Jul 27 '12 at 13:22

4 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. – Jonathan. Mar 20 '14 at 21:29

2 @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. – Jonathan. Mar 22 '14 at
11:40

show 10 more comments

You can use the onload="" HTML attribute and use JavaScript to adjust the opacity style of your
element.
19 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.

share improve this answer edited Sep 25 at 17:20 answered Apr 24 '13 at 9:36
Peter Mortensen Ned
14.5k 19 89 118 251 2 5

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. – Jeppe Jul 5 '18 at 6:55

add a comment

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
5 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>

share improve this answer edited Sep 25 at 17:18 answered Jul 27 '12 at 13:38
Peter Mortensen Rob
14.5k 19 89 118 12k 8 33 54

add a comment

protected by Andrew Medico Mar 21 '16 at 12:20

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be
removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged css css-transitions opacity or ask
your own question.

STACK OVERFLOW PRODUCTS COMPANY STACK EXCHANGE Blog Facebook Twitter LinkedIn
NETWORK
Questions Teams About
Technology
Jobs Talent Press
Life / Arts
Developer Jobs Directory Advertising Work Here
Culture / Recreation
Salary Calculator Enterprise Legal
Science
Help Privacy Policy
Other
Mobile Contact Us site design / logo © 2019 Stack Exchange Inc; user contributions
licensed under cc by-sa 4.0 with attribution required.
Disable Responsiveness rev 2019.10.14.35179