Can CSS Transitions Create a Fade-In Effect on Page Load?

Creating a Fade-In Effect on Page Load Using CSS Transitions

Can CSS transitions be employed for a fading effect on text when a page loads?

To achieve this fade-in effect, incorporate the following CSS rule:

<h1 id="test-p">test p {</h1><p>margin-top: 25px;<br>  font-size: 21px;<br>  text-align: center;<br>  opacity: 0;<br>  transition: opacity 2s ease-in;<br>}<br></p>

Now, to trigger the transition on load, you can use one of the following methods:

Method 1: CSS Animations (Not Widely Supported)

<h1 id="test-p">test p {</h1><p>animation: fadein 2s;<br>}</p><p>@keyframes fadein {<br>  from { opacity: 0; }<br>  to   { opacity: 1; }<br>}<br></p>

Method 2: jQuery or JavaScript

Execute the following jQuery script on document load:

<br>$("#test p").addClass("load");<br>

With the corresponding CSS:

<h1 id="test-p">test p {</h1><p>transition: opacity 2s ease-in;<br>  opacity: 0;<br>}</p><h1 id="test-p-load">test p.load {</h1><p>opacity: 1;<br>}<br></p>

Method 3: Using jQuery's Deferred Animations

trigger the animation with a delay and set duration:

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

Note that different methods may offer varying levels of cross-browser compatibility, as discussed in the provided responses.

The above is the detailed content of Can CSS Transitions Create a Fade-In Effect on Page Load?. For more information, please follow other related articles on the PHP Chinese website!