Smooth CSS Fade in on Page Load Animation

Smooth CSS Fade in on Page Load Animation

A day ago, We have created the CSS3 fade in animation but today we are going to make similar animation on Page Load.

You find similar kind of animation on different premium templates. As the page load completed, the element of the website shows off in different animation.

One of the types of animation is a fad in and today we are going to take a look the different way to fade in animation.

We have built eight different type of CSS animation on page load which included, fade in left, fade in the right, fade in the bottom and top, etc.

You can easily implement on page load animation on your website elements such as div, images, icons, and background.

To create a simple fade effect, we require two type of CSS properties.

First one is transformed apply to 2D and 3D transformation to a web element. The second one is opacity that requires making the translucence.

CSS Fade in on Page Load Animation

The simple syntax of fade in is below where from opacity value is 0 and to opacity value is 1.

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

HTML Markup

Let’s start with HTML markup and look step by step how to make the fade in effect. We simply have a div with different classes name.

We have divided each set of code into different classes so that you can easily understand. We have four different classes such as box, animate, fade, one

<div class="box animate fadeIn one">
    Fadein
</div>

The Styling

First of all, we will style the box. That is something don’t need if you are implementing on your website element. You can say this is our element of a web page.

.box {
    background: #2ecc71 none repeat scroll 0 0;
    color: white;
    float: left;
    font-family: "Raleway",sans-serif;
    font-size: 14px;
    font-weight: 600;
    height: 150px;
    line-height: 150px;
    margin: 1%;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 28%;
}

Next, we need to trigger the box, and this required for all type of fade effects.

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Now we need to set the timer, and this is optional delays, and you can change value as per your need.

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

Finally, We need to use @keyframes CSS3 property to add the fade effect. We are going to implement only fadeInUp animation here, but you will find all the types in below demo with code and examples.

As I explained above in Syntax, we have opacity value either 0 or 1. We use translate3d and set the middle value 100% to create the fade in up animation.

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-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;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

Please do share, if you like.

Code ExamplesYou May Also Like