Menu
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.
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?
780
Use animation and transition property to create a fade-in effect on page load using CSS. Method 1: Using CSS animation property: A CSS animation is defined with 2 keyframes. One with the opacity set to 0, the other with the opacity set to 1.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out.
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.
#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; } } All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:
$("#test p").addClass("load"); #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; } document.getElementById("test").children[0].className += " load"; All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions
Or, you can use the method that .Mail uses:
$("#test p").delay(1000).animate({ opacity: 1 }, 700); #test p { opacity: 0; font-size: 21px; margin-top: 25px; text-align: center; } 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.
82
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
