How to Create a Fade-In Animation Effect with JavaScript and CSS

Animations, Transitions, and 3D effects are nothing less than an eye-catcher. Whenever you are building your website or a project, you don’t want it to get lost in the cluster of millions of websites that are available on the internet. You want it to stand out, you want it to amuse its users and get stored in their subconscious minds. To make your web pages more intriguing, you need to utilize various animations and page transition effects.

One of the popular and extremely interesting animation effects is the Fade-in and Fade-out animation, which can be implemented using JavaScript and HTML \ CSS.

Step 1: Set up the basic page

Create a new HTML on your preferred code editor, create a script.js file and a style.css file as well like shown:

Inside the HTML file, link the CSS file and the script.js file using the following lines before the body tag:

Now, we are going to implement a fade-in animation on an image, and for the image, we are going to be using a royalty-free image from Unsplash. You can create an image tag and a button that we will use to fade in and fade out the image with the following lines:

<center>
<img
id="Image" src="https://images.unsplash.com/photo-1640273837947-ea830d50c191?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80"
alt=""
/>
<br />
<button id="myButton">Fade Effect</button>
</center>

Notice that we have given the id “Image” to the image and the id of “myButton” to the button that we are creating.

Since the image is quite large, we are going to set a particular height and width in the CSS file using the following lines:

#image {
height: 200px;
width: 200px;
}

Your page should look like this:

We have our image in the center of the screen and right beneath the image we have our button.

Step 2: Modifying the CSS File

There are many ways to implement a particular animation using CSS and JavaScript, but for this particular post we are going to be playing with classes and the opacity attribute of the CSS. Modify your CSS file with the following lines:

#image {
opacity: 1;
transition: opacity 0.3s ease-in-out;
height: 200px;
width: 200px;
}
#image.fade {
opacity: 0;
}

To explain what we are doing in the above lines: We are simply putting the opacity of the image to 100% at the start and if the image has an active class “fade” then opacity will change to 0%. But, this opacity change will happen in an instance, to make an animation-like effect we use the transition attribute and set it to 0.3s.

Now, all we need to do is write some script that will toggle the class “Fade” from the image

Step 3: Toggling Class with JavaScript

In the script.js file, we are going to first fetch the image element and store it inside a variable, and then we are going to toggle the class but all of this should be done upon the button press. So, append the following lines in the script file:

let image = document.getElementById("Image");
document.getElementById("myButton").onclick = function () {
image.classList.toggle("fade");
};

So, with this we should be able to implement the fade-in animation and fade-out transition as well.

Step 4: Testing our animation

The last step is to run the HTML file on our local machine and test out the animation upon button press, you should see the following output:

As you can see in the above gif that our animation is working perfectly.

Conclusion

Animations can easily be implemented with the use of JavaScript along with HTML and CSS to make webpages look much more attractive and eye-catching. In this post, we learned how to make a fade-in and a fade-out animation on an HTML element by assigning different CSS properties on the class of the element and then toggling the classes using JavaScript.