Introduction to CSS Fade-in Animation
As we know, there is a vast variety of features that CSS has to offer to a developer. While some of them can be directly achieved, some are achievable by tinkering with the already existing features. For example, there are different types of animations that can be put on various elements on a page. Fade-In animation is one such. In the case of fade-In animation, the object of the question appears to darken when hovered upon. Now, there are many ways to achieve this effect. This can be done to highlight a particular button or image. We can do so by playing around with the opacity of the element. In this topic, we are going to learn about CSS Fade-in Animation.
Methodology and Example of CSS Fade-in Animation
For achieving the fade-in effect through CSS, we will play around with the opacity, transition, and hover features. We will specify the original opacity of the object/element, and within the pseudo-class created for the hover feature, we will specify the opacity it must transform to upon hover. We can follow the method of using external CSS, where we will create a style sheet file externally and call it on the HTML page. Or we can follow internal CSS and style the elements in the head section of the HTML code. First, let us look at the example to understand how the Fade-in effect works.
Fade In Animation for a Button, Using External CSS
1. Since this is external CSS, we will be creating the CSS file first. Then, we will define the styling for <div>. The code can be as follows:
div{
background-color: aquamarine;
height: 100px;
width: 100px;
padding: 10px;
margin: 10px;
}
2. Next, we will style a class, where we will define the property “opacity” and its transition time. We will initially keep the opacity at 50% such that it appears lighter than usual. In the pseudo hover class, we will make the opacity 100% such that it darkens as the end-user hovers over it. The code for the following is as follows:
.cl1 {
opacity: 50%;
transition:opacity 0.5s
}
.cl1:hover {
opacity:100%;
transition:opacity 0.5s
}
4.5 (8,451 ratings)
View Course
3. Combining the code, we will have the CSS file as follows:
div{
background-color: aquamarine;
height: 200px;
width: 200px;
padding: 10px;
margin: 10px;
}
.cl1 {
opacity: 50%;
transition:opacity 0.5s
}
.cl1:hover {
opacity:100%;
transition:opacity 0.5s
}
4. Next, we will code for the HTML page. Since this is an external CSS example, we will call for the externally created CSS file in the header section as follows:
<head>
<title>Fade In Animation Using CSS</title>
<link rel="stylesheet" type="text/css" href="fadeIn.css">
</head>
5. Once done, we will move to the body section. We have styled the >div> element and defined the class cl1 for the animation effect. Next, we will call the <div> element in the body section and call for the class cl1 as well. This way, anything under the <div /> section will show the animation effect. The code for it is as follows:
<body>
<div class="cl1">
<center>
<h2>Fade In Using CSS</h2>
<button type="button">Click</button>
</center>
</div>
</body>
6. Combing the snippets, the final HTML code will look like this:
<html>
<head>
<title>Fade In Animation Using CSS</title>
<link rel="stylesheet" type="text/css" href="fadeIn.css">
</head>
<body>
<div class="cl1">
<center>
<h2>Fade In Using CSS</h2>
<button type="button">Click</button>
</center>
</div>
</body>
</html>
7. We can observe the output by saving the html file and opening it through a browser. We will get the following output:
8. On hovering over the square patch, we will get the following output:
9. We can clearly see how the fade-in effect works.
Fade in Animation for an Image, Using Internal CSS
1. Since this example uses internal CSS, we will define the styling within the HTML page itself.
2. We will make use of the <style> tag, which will be defined in the header section of the HTML page.
3. Within the <style> tab, we will first style the <div> element followed by defining the class with opacity property. We will then define the pseudo-class with the transformation in opacity on hover.
4. The code in the <style> tag will look like this:
<style>
div{
background-color: aquamarine;
height: 200px;
width: 200px;
padding: 10px;
margin: 10px;
}
.cl1{
opacity: 50%;
transition: opacity 0.5s;
}
.cl1:hover{
opacity: 100%;
transition: opacity 0.5s;
}
</style>
5. Once the styling is defined, we will move on to the body part. First, we will call the <div> element as we have styled that in the header section. Next, we will call the class cl1 along with <div>. Then, within the <div> section, we will call the image. This way, the image will show the fade-in animation as expected.
6. The body section of the page can be coded as:
<div class="cl1">
<center>
<h2>Fade In Using CSS</h2>
<img src="first.jpg" height="100px" width="120px"></img>
</center>
</div>
7. Combining the body and head section, the final HTML code we get is as follows:
<html>
<head>
<title>Fade In Animation Using CSS</title>
<style>
div{
background-color: aquamarine;
height: 200px;
width: 200px;
padding: 10px;
margin: 10px;
}
.cl1{
opacity: 50%;
transition: opacity 0.5s;
}
.cl1:hover{
opacity: 100%;
transition: opacity 0.5s;
}
</style>
</head>
<body>
<div class="cl1">
<center>
<h2>Fade In Using CSS</h2>
<img src="first.jpg" height="100px" width="120px"></img>
</center>
</div>
</body>
</html>
8. Saving the above HTML code and opening it through the browser will give us the following result:
9. Hovering over the square patch will give the following result:
10. Hence, we can see the fade-in effect that is projected in the above two screenshots. This happens when the object in question is hovered upon.
In the above two examples, we learned how to achieve fade-in animation using internal or external CSS combined with HTML. There are other options too, which can be explored and used if the animation is needed elsewhere. To keep the code optimized, it is important to use External CSS. Many other features can also be implemented following a similar means to customize the pages being developed. It completely depends upon the choice of the developer, what way they want to proceed and achieve the desired results.
Recommended Articles
This is a guide to CSS Fade-in Animation. Here we discuss how to achieve fade-in animation using internal or external CSS combined with HTML. You may also have a look at the following articles to learn more –
