Using CSS For a Fade-In Effect on Page Load

Using CSS for a fade-in effect on page load

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.

How to use fade-in text/image on page is loaded

http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]

Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:

<div class="wrapper fade-in">

There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.

All the animation commands will appear in your CSS like so:

@keyframes fadeIn
  to { 
     opacity: 1; }

Then your divs are going to have a class that calls the animation (@keyframes):

.fade-in {
  animation: fadeIn 1.0s ease forwards;
  [other div properties can be included here]
}

The HTML will look like this:

<div class="fade-in">
[content]
</div>

Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

The vendor codes will have to be duplicated again in your div class in the CSS:

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}

The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.

---

After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/

Just make sure you understand it first though.

Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ

Fade in image on page load

You need to add the class="animation" to the object element

CSS fade-in / ease effect on page load

For the simplest animation, you'll want to use CSS3 transitions, which are supported on everything except opera mobile.

transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;

And then with javascript or jQuery you can set the new state on load.

$('#element').css({opacity: 1.0, top: '0px'})

But for the most flexibility and control, you'll want to use jQuery's .animate() function. Then you can do something like
$('#element').animate({
opacity: '1.0',
top: '0px'
}, 200)

Have the default CSS set to opacity: 0; top: 20px; position: relative;

How to fade in image on page load

Animations also need keyframes so it knows where to begin and end. In this case your fadein animation is close. It also needs a starting and ending opacity so it can go from invisible to visible. Try adding the keyframe below:

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

Working fiddle here: https://jsfiddle.net/70p9cxdb/1/

css3 fade in on page load, out after seconds

Your issue stems from applying two animations at once that you actually want to run in sequence. To get this working reliably you have two options:

CSS only:
http://jsfiddle.net/marionebl/M9LR6/

Note opacity: 0; to keep the message hidden when the animation completes. Plus: This won't work in IE <= 9, it does not support keyframe animations: http://caniuse.com/#feat=css-animation

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    16% {
       opacity: 1;
    }
    84% {
       opacity: 1;
    }
    100% {
       opacity: 0;
    }
}

.message {
    width: 400px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
   -webkit-animation: fadeInOut 6s;
   animation: fadeInOut 6s;
}

Involving JS:
http://jsfiddle.net/marionebl/P26c9/1/

Is somewhat more flexible and easier to change, supports IE9.

CSS:

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeIn {
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1;
}

.fadeOut {
    -webkit-animation: fadeOut;
    animation: fadeOut;
    opacity: 0;
}

.fast {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.message {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

JS:

var $message = $('.message');
$message.addClass('fadeIn fast');

setTimeout(function(){
   $message.removeClass('fadeIn').addClass('fadeOut');
}, 5000);

---

Related Topics