Now with support for Opera Browsers
Pure CSS3 Image Fade In after Page Load
I was recently proposed with the question: Is it possible to have images fade in shortly after the page has loaded and stay faded in and can the images fade in at different rates and times? This automatically made me think of the jQuery fadeIn feature. Does this mean jQuery is soon to be replaced by CSS as well!
Is it Possible?
I have not actually seen anyone try to make this using pure CSS, most just revert to jQuery. So I immediately decided I wasn’t even going to try and Google this and see what I could come up with.
Game Plan
Alright so we want to make this a dynamic as possible, so what do we need for a basic setup? I decided three classes would be perfect for this. One for the generic class to identify which images to fade in, One to decide how long for the image to fade in, and lastly how long should it take before the image starts to fade in.
So lets setup the basic CSS required. First things first let us set up the keyframes for future use.
CSS3 Keyframes
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
This is as simple as keyframes could be, a nice and simple animation from 0 percent opacity all the way to 100 percent opacity. I named each keyframe to be similar to what jQuery uses (fadeIn).
.fadeIn
/* Styling for Demo ---------------------------------------------------- */ border:5px solid #c9c9c9; margin:15px; -webkit-box-shadow: 0px 0px 5px #333; -moz-box-shadow: 0px 0px 5px #333; -ms-box-shadow: 0px 0px 5px #333; -o-box-shadow: 0px 0px 5px #333; box-shadow: 0px 0px 5px #333; /* CSS needed for animation ---------------------------------------------------- */ opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards;
Let us start by ignoring everything “Styling for Demo” and lets break down the “CSS needed for animation”
opacity:0;
This hides the image for being displayed on page load
/* The following sets up the animation for the most popular browsers */
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
For those who may not know CSS3 all the well, Let me explain how this animation statement is working. Animation is used to tell the class or ID which keyframe to play. I’ll explain which each element of this particular animation statement is doing. animation: [KEYFRAME NAME] [TIMING FUNCTION] [ITERATION COUNT];
KEYFRAME NAME: Specifies the name of the @keyframes animation TIMING FUNCTION: Describes how the animation will progress over one cycle of its duration ITERATION COUNT: Specifies the number of times an animation is played.
This animation statement is telling the “fadeIn” class that is should play the “fadeIn” keyframe useing a ease-in animation and to only do it once.
animation-fill-mode:forwards;
This statement is used to tell the animation not to reset to 0 once it is complete. It well hold the “100%” or “to” status of the keyframe. This way once the the image is faded in the opacity is not reset to 0 again.
Now let us go over the css classes we are going to use for the duration it takes for each image to fade in.
.fadeIn-Xs
-webkit-animation-duration: Xs; -moz-animation-duration: Xs; -o-animation-duration: Xs; animation-duration: Xs;
This is pretty clear without out being described, but this simply tells the animation to play for X seconds. Simply create this class and change the “X“‘s to how many seconds you would like the animation to play for. An example would be the following classes.
.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn-5s {
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;
}
We are are the last part of CSS code well need now. We need some CSS classes that delay the image animation so it wont start playing immediately once the page loads but X seconds afterwords.
.fadeIn-Delay-Xs
-webkit-animation-delay: Xs; -moz-animation-delay: Xs; -o-animation-delay: Xs; animation-delay: Xs;
This is similar to the “fadeIn-Xs” class except it is delaying the animation for starting for “X” seconds. Simply replace the “X“‘s with the amount of seconds you would like to delay the animation from playing.
As before, here are two examples of what I chose to use.
.fadeIn-Delay-3s {
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;
}
.fadeIn-Delay-5s {
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-o-animation-delay:5s;
animation-delay:5s;
}
Lets Look at it all Together Now
.fadeIn {
/* Styling for Demo
---------------------------------------------------- */
border:5px solid #c9c9c9;
margin:15px;
-webkit-box-shadow: 0px 0px 5px #333;
-moz-box-shadow: 0px 0px 5px #333;
-ms-box-shadow: 0px 0px 5px #333;
-o-box-shadow: 0px 0px 5px #333;
box-shadow: 0px 0px 5px #333;
/* CSS needed for animation
---------------------------------------------------- */
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/* Animation Times - Time for image to fade in
---------------------------------------------------- */
.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn-5s {
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;
}
/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.fadeIn-Delay-3s {
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;
}
.fadeIn-Delay-5s {
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-o-animation-delay:5s;
animation-delay:5s;
}
/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
Alright now I now that seems like an incridiablly long amount of code, but are you ready to see what all of this beautiful CSS3 code can do in a nice and simple image tag.
HTML Markup
<img class="fadeIn fadeIn-3s fadeIn-Delay-3s" src="path/to/image.jpg" alt="" />
Alright, now lets explain what this is doing. First we need to link the img tag to an image to use. Next we need to include the classes that tell the image what to do. First we add the class “fadeIn” this tells the image that it well be faded in. Secondly “fadeIn-3s” tells the image that it well take 3 seconds to fade in. Lastly “fadeIn-Delay-3s” tells the image that it well not fade in until 3 seconds after the page has been loaded.
Incoming search terms:
css3 fadein, html5 fade in image, css3 fade in, css3 fade in onload, css3 fade in on load, css3 image fade in,
Robert McIntosh
I am highly skilled in HTML/HTML5, CSS/CSS3, JavaScript, and PHP. This knownledge of both Client and Server side scripting language allows me to create stunning designs that come with a CMS(Content Management System) to allow clients to update and manage their own site.
If you would like to see how I can help you, I would love to work with you and see what we can accomplish.
Latest posts by Robert McIntosh (see all)
- Pure CSS3 Animated Tooltips - April 10, 2012
- Pure CSS3 Image Fade In after Page Load - April 3, 2012
- Pure CSS3 Slideshow (Works in Firefox, Safari, and Google Chrome) - October 4, 2011