CREATING FANCY CSS3 FADE IN ANIMATIONS ON PAGE LOAD

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

 

       look at me fade in


       Oh hi! i can fade too!


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

See demo 

 http://graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/