Creating fancy CSS3 fade in animations on page load

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. This is different than having your animations come in as you scroll. 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).

UPDATE: in a hurry?  Add this CSS to yours to have instant fade in effects.

We will cover how to achieve this:

See the Pen gaWMqm by Alex (@fabriceleven)

What we will do

We will create 3 boxes and they will fade in one after another. Here are our steps to accomplish this:

  1. Create a div in our html that we want to animate
  2. Create keyframes in our css file (these basically will define how things change )
  3. 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 work on Firefox, Chrome, Safari and IE9+) 

Ok let’s make some basic boxes

<div class="box fade-in one">
       look at me fade in
<div class="box fade-in two">
       Oh hi! i can fade too!
<div class="box fade-in three">
       Oh hi! i can fade three!

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)*/

} {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;

.fade-in.two {
-webkit-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 ---*/
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 use inline CSS browser selection by doing: opacity: 1\9; /* IE9 only */

You can have the duration in different classes as well, like:  .one, .two etc that’s how we achieved the boxes loading right after another. You can see our chat icon slide out from bottom right corner on our design blog index page. We use fade along with a few other properties in the keyframe.

That’s about it, if you want a quick CSS you can just add to yours with a few prebuilt animations like fade down, up, left, right etc then see hereLet us know how you used it and if you have any questions or comments.

Here is quick tutorial on how to make animations come in on page scroll