Stack Overflow About Products For Teams Search… Join Stack Overflow to learn, share knowledge, and build your career. Home PUBLIC Stack Overflow Tags Users FIND A JOB Jobs Companies TEAMS What’s this? Free 30 Day Trial Using CSS for a fade-in effect on page load Asked 8 years, 6 months ago Active 2 months ago Viewed 1.3m times Report this ad 475 210 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:

This is a test

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? css css-transitions opacity Share Improve this question Follow edited Sep 25 '19 at 17:20 Peter Mortensen 27.5k2121 gold badges9393 silver badges123123 bronze badges asked Jul 26 '12 at 23:36 user1556266 4,75333 gold badges1111 silver badges55 bronze badges 8 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 '19 at 13:53 add a comment 4 Answers 989 +50 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. Share Improve this answer Follow edited Sep 25 '19 at 17:16 Peter Mortensen 27.5k2121 gold badges9393 silver badges123123 bronze badges answered Jul 27 '12 at 4:10 A.M.K 15.3k33 gold badges2727 silver badges6161 bronze badges 158 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 5 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 3 @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

This is a test

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

test

Share Improve this answer Follow edited Sep 25 '19 at 17:18 Peter Mortensen 27.5k2121 gold badges9393 silver badges123123 bronze badges answered Jul 27 '12 at 13:38 Rob 13.2k2424 gold badges3939 silver badges5959 bronze badges add a comment 0 Looking forward to Web Animations in 2020. Show code snippet Share Improve this answer Follow edited Nov 22 '20 at 6:47 answered Nov 22 '20 at 6:28 Alex Nolasco 16.7k99 gold badges6767 silver badges7272 bronze badges add a comment Highly active question. Earn 10 reputation in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity. Not the answer you're looking for? Browse other questions tagged css css-transitions opacity or ask your own question. The Overflow Blog Podcast 309: Can’t stop, won’t stop, GameStop Sequencing your DNA with a USB dongle and open source code Featured on Meta Opt-in alpha test for a new Stacks editor Visual design changes to the review queues Should we burninate [electronics]? Jobs near you Senior React Engineer with eye for design - London or remote (in EU time-zone) Cleo AILondon, UK REMOTE reactjsuser-experience Frontend Software Developer (React) C the SignsLondon, UK £50K - £58K csshtml Frontend Developer Octopus EnergyLondon, UK £40K - £60K reactjsdjango Drupal Front-End Developer CompucorpLondon, UK £15K - £25KREMOTE htmlstyling Frontend Engineer causaLensLondon, UK £30K - £70K user-interfacereactjs Front-end Developer for Soho Digital Agency Tui MediaLondon, UK cssjavascript Experienced React + VanillaJS Engineer, FinTech TotallyMoneyLondon, UK £55K - £75K javascriptreactjs Software Engineer - Full-stack -London The OrchardLondon, UK pythonreactjs View more jobs on Stack Overflow Linked -1 How can I fade in new HTML elements with CSS 0 fade in and out text using css 0 fade transition to a div on load 319 How to make blinking/flashing text with CSS 3 7 When are CSS transitions fired? 2 How to convert a jQuery fade effect in CSS? 3 CSS color change in basic HTML document 0 How can I create a fade in/fade out effect using only CSS? 0 Fade on load doesn't work 0 h1 fade effect using Jquery See more linked questions Related 3433 Set cellpadding and cellspacing in CSS? 2356 How do I give text or an image a transparent background using CSS? 3410 Is there a CSS parent selector? 4089 Change a HTML5 input's placeholder color with CSS 1573 Transitions on the CSS display property 2276 How can I transition height: 0; to height: auto; using CSS? 2904 Is it possible to apply CSS to half of a character? Hot Network Questions How to tell if an image of a triangle has half its area shaded? Can the Dread Helm make all eyes glow red? Is it immoral to advise PhD students in non-industry-relevant topics in middle-lower ranked universities? Should I drop dbo from the database role db_owner? Story about a robot creating a machine which violated the laws of Physics? Why does not a closed 3-manifold modelled on SL(2,R) admit a metric of nonpositive curvature? maximum product of n numbers whose sum is k May I use my former-yet-active email address of an institute as a contact channel in my current CV? Changing value of const pointer My new cat won't stop meowing Is it legal for a minor to "sell" notes from a college class back to the college? What could explain that somebody is buried half a year after dying? Close(st) Binary Boxes is there a way to cd into a directory based on the last characters? Increment numbers greater than 50 in a file Regarding transient analysis of RC circuit How to create a spiral brightness gradient Define a macro to apply operation to text separated by \\ How soon can we realize that we stopped aging? First order condition of log functions in general and interpretation Is there still a Belgian vs. French distinction between "quatorze jours" and "quinze jours"? Why are internet speeds variable and not fixed numbers? Is it possible to throw a baseball so hard it circles the earth above your head? Do missiles need anti-icing? Question feed STACK OVERFLOW Questions Jobs Developer Jobs Directory Salary Calculator Help Mobile Disable Responsiveness PRODUCTS Teams Talent Advertising Enterprise COMPANY About Press Work Here Legal Privacy Policy Terms of Service Contact Us STACK EXCHANGE NETWORK Technology Life / Arts Culture / Recreation Science Other Blog Facebook Twitter LinkedIn Instagram site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.2.3.38483