Detailed Practical Implementation of Animate.css Library | Animation Effects to Web Applications or Projects
Hi, I'm @techlhab. A week ago I published an article introducing what animate.css was, how to install and use it on web applications and projects developed using any web application development frontend frameworks such as Vue, React, Angular, etc and also on basic web applications or projects built with HTML, CSS, and Javascript.
You can refer back to the post by clicking or following this link to see how to install and use the animate.css library.
Today, I would be demonstrating a practical implementation and utilization of animate.css library which is a library that is used in creating or adding animation effects easily on web applications or projects.
The image above shows the HTML file with the CDN to animate.css library added to the head tag and also I added an image and texts to be animated inside a div in the body tag of the HTML file.
Also here goes the raw code in the image above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Implementing Animate.css</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<div class="main">
<img class="animate__animated animate__fadeInUpBig" src="images/hive.png" alt="hive logo">
<h5>Hive Blockchain</h5>
</div>
</body>
</html>
In the image tag that is <img class="animate__animated animate__fadeInUpBig" src="images/hive.png" alt="hive logo"> there are two class names the first one which is animate_animated which is the first class that would always precede the object to be animated on the webpage then followed by the desired animation effect class name animate__fadeInUpBig. More animation effects class names can be found through this link so any desired animation effects class name can be selected and used by just adding it to the exiting class name animate__animated.
The code in the image above gives an output of:
Adding some css styling to it to make the appearance better using the codes in the image below:
Here goes the raw code in the image above:
.main{
width: 100%;
justify-content: center;
display: grid;
margin-top: 100px;
}
.main h5{
text-align: center;
font-size: 30px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
From the image below, it can be seen that the CSS styling file style.css has been added and linked to the head tag of the HTML file.
Here goes the raw code in the image above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Implementing Animate.css</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="main">
<img class="animate__animated animate__fadeInUpBig" src="images/hive.png" alt="hive logo">
<h5>Hive Blockchain</h5>
</div>
</body>
</html>
The output of the code now looks better as the UI has improved with the styling added which is shown below:
I created a GitHub repository and push the code and other resources used for implementing the topic above in it, which can access via this link.
I would be dropping another post on how to implement animate.css on web application development frontend frameworks like Vue, react, angular, etc with a live project soon so stay tuned.
Thanks for reading 🤝. If you find this post interesting you can help or support it with reblogging, upvoting, and commenting, it would be highly appreciated.