Quickly add CSS Fade in animations

 In essence this is very similar to our original tutorial, however this one comes already with built in fadeInLeft, fadeInRight, fadeInDown and fadeInUp animations. We borrowed these classes from animate.css framework so all credit goes to Daniel Eden. You can download the full animate.css from his site which comes with a boat load of animations that you will probably never use. So why add another css file to your project when you can just add the ones that are used the most.

Don’t have time to read? Just skip and add this css to yours and you can start using it right out of the box.

See the Pen QjZjPG by Alex (@fabriceleven) .

How it works

We have a trigger that needs to be added anytime animation is to be used. We set it to be animate and it looks like this

/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Then we have delay, for example:  (you can modify it to be whatever you want)

.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

And finally the rest is just the animation itself. It consists of @keyframe that tells what’s changing and how, as well as the keyframe pointer.

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

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

  to {
    opacity: 1;
  }
}

/*--keyframe pointer --*/
.fadeIn { 
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

That’s all you need to create these animations! So your html might look like this:

<div class="box animate fadeInUp one">
    Going up 
</div>

First class is just to style our object, second is the trigger, then animation name followed by an optional delay.

Final CSS you can just copy and paste to yours

The below css has the following animations: fadeIn, fadeInDown, fadeInUp, fadeInLeft and fadeInRight . Just add this CSS to the bottom of yours and you can start using them just like in our example. More run down how this works and creating custom animations is in our original tutorial.

/*=== Basic box styling  ===*/
.box {
  background: #23a3d3;
  width: 150px;
  height: 70px;
  padding: 20px;
  text-align: center;
  color: white;
  border-radius: 7px;
  float: left;
  margin: 4px;
  font-family: 'helvetica';
  text-transform: uppercase;
}


/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}

.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}

.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}

/*=== Animations start here  ===*/
/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

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

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}


/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

The only limitation of this is that it only animates once. So if you have a lot of these on a page and some below the fold, even though you have added a delay they might get executed before user actually sees them. The solution is to have these animations come in as user scrolls all you need is include 1 small js file and you are set (you can still use the above tags you just will use a different trigger word other than animate, see our tutorial

Let us know how you are using this! Again remember to not overdo it, fadeIn and fadeInUp look the best (you can see it on our about us page as you scroll).