Smooth CSS Fade in On Page Load Animation

A day ago, We created the CSS3 fade-in animation but today we are going to make similar transition effects on Page Load. It works after page load.

We will apply the CSS animation on div elements in the content area and it will works after page load completely.

You find a similar kind of animation on different premium templates. As the page load is done, the elements such as div on the website start coming from a different position (top, left, right & bottom) with nice and smooth 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 types of CSS fade-in transition on the scroll which included, fade-in left, fade-in the right, fade-in the bottom and fade-in 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 types 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.

How to Create 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;
  }
}

Basic 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. It’s just for demo purpose only.

.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 the 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;
}

That’s it. We have added all the possible CSS animation classes in the stylesheet and define the markup in index.html. You simply need to pick and apply any class which you like the effect.

You May Also Like

Leave a Comment