Oh hi there, have you ever wanted to create fade in like animations on page load? Think Google homepage, or even our site has plenty of them (just check out our about us page and watch paragraphs fade in). This will all be done using CSS3 so this will work on all modern browsers except of course IE7, Ie8 and 9. IE10 should support them though, so now is a good time to start practicing. This is a super quick tutorial so sorry, there won’t be any body html code etc (ask in the comments if you have any questions).
View the fade in demo on our about us page
What we will do
We will create 3 boxes and they will fade in one after another.
Here are our steps to accomplish this:
- Create a div in our html that we want to animate
- Create keyframes in our css file (these basically will define how things change )
- Create div tag in our css, define our animation (duration, start delay etc) and link it to our keyframes
So let’s get started
This CSS3 code will only work on Firefox, Chrome, Safari and maybe newer versions of IE (after version 9)
Ok let’s make some basic boxes
<body>
<div class="box fade-in one">
look at me fade in
</div>
<div class="box fade-in two">
Oh hi! i can fade too!
</div>
<div class="box fade-in three">
Oh hi! i can fade three!
</div>
</body>
Ok so the above basically makes 3 boxes, we named them box , the fade-in is going to be our animation class and the number after is just there so we can have them load in an order we want.
And now for the magic code.
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}
That’s all the code we will need.
Here is how it works
The keyframes (the reason there are 3 of them is to support webkit, firefox and future browsers) basically say the start state of our box and then the end state. Since we want the box to fade we start at opacity 0 and by the time we are done we end at opacity 1. You can also put other parameters in there as well. For example you can start with width:100px; and end with width: 500px; etc
The fade-in class tells what kind of animation we will perform. Which is basically: go do keyframes called fadeIn, use ease-in animation and only do the animation once. Then stay at the last keyframe (-webkit-animation-fill-mode:forwards;) to make sure our boxes don’t disappear and do all this in 1s (-webkit-animation-duration: 1s).
The next 3 classes just give our animations different delays so they start one after another upon page load.
And that’s it really.
Since IE9 doesn’t support css3 animations but does support opacity: 0; property you will have to have ie9 load a separate ie9 css where you have all your fade classes set to opacity: 1
You can have the duration in different classes as well, like: .one, .two etc that’s how we achieved the columns loading right after another on our clients page.
That’s about it, let us know how you used it and if you have any questions or comments.
