Animation in HTML css
HTML is hypertext markup language so today we will learn how can we make animation in HTML CSS and we are going to animate the rainfall effect in HTML.
<html><head>
<title> this is an example of animation</title>
</head>
<body>
<div class="animate1"></div>
so here I have closed head tag and I have given a title you can give anything as the title, so we have written div in which I have given a class called animate1 now we are going to make many div and will give different class to each you can give it any name
<html>
<head>
<title> this is an example of animation</title>
</head>
<body>
<div class="animate1"></div>
<div class="animate2"></div>
<div class="animate3"></div>
<div class="animate4"></div>
<div class="animate5"></div>
here are some div and its classes, now I will be
adding a style tag inside the body tag we will also add the class in it. there are maybe many other ways to give rainfall effect
but I am using this way as I know this code might be lengthy but it will be interesting
suppose
<html>
<head>
<title> this is an example of animation</title>
</head>
<body>
<style type ="text/css">
.animate1{
}
.animate2{
}
.animate3{
}
.animate4{
}
.animate5{
}
</style>
<div class="animate1"></div>
<div class="animate2"></div>
<div class="animate3"></div>
<div class="animate4"></div>
<div class="animate5"></div>
I have written classes inside style tag class the thing you should remember is that while writing class you should always start with a full stop, and now
will start our animation work
<html>
<head>
<title> this is an example of animation</title>
</head>
<body>
<style type ="text/css">
.animate1{
height:6%;
width:0.60%;
border-radius:2%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:13%;
}
.animate2{
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:30%;
}
.animate3{
height:6%;
width:0.60%;
border-radius:2%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:46%;
}
.animate4{
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:60%;
}
.animate5{
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:72%;
}
@keyframes hi{
0% {
top:1%;
}
100%{
top:94%;
{
}
</style>
<div class="animate1"></div>
<div class="animate2"></div>
<div class="animate3"></div>
<div class="animate4"></div>
<div class="animate5"></div>
</body>
</html>
don't think that this is hard it's not hard
what is @keyframes hi.
@keyframes is something which you should write while you start doing animation and what's hi it is the name of the animation. you can give any name suppose @keyframes hello whatever you like.
what is this class inside the style tag?
the class tag inside the style tag helps us to define property like at what position you want to start. the code I have written inside the class is not that you have to remember it is something which you should understand and there is much class inside style tag
the code I have written is not so different you just need to write it once like write class animate once and copy and paste it till animate 5
what you have to change is like position like left: 1%,left:10%, and left:20%/, so you should give some space.
what is the animation name inside the class?
it is the name of animation like I have given @keyframes hi so you should write the name what you have given in keyframes as animation-name
while when we define some property in @keyframes hi it will target that class which has that name so that class will work according to the property we have given to keyframes.
what is animation-iteration-count
it means how many time you would like to run that animation like I will like it to run 1 time or 2 times so you have to define that property like animation-iteration-count:1; And if you want it to run continuously then you should write infinite which don't want it to stop and want that it should run continuously
what is animation duration?
it means that till what time you want the animation to run like if you want to play it for minute or seconds and here is the whole code copy and paste it in the notepad or your code editor like the sublime text to watch the animation
<html>
<head>
<title> this is an example of animation</title>
</head>
<body>
<style type ="text/css">
.animate1{
height:6%;
width:0.60%;
border-radius:2%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:13%;
}
.animate2 {
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:30%;
}
.animate3{
height:6%;
width:0.60%;
border-radius:2%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:46%;
}
.animate4{
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:60%;
}
.animate5{
height:6%;
border-radius:2%;
width:0.60%;
border:none;
background-color:lightblue;
position:absolute;
animation-name:hii;
animation-iteration-count:infinite;
animation-duration:1.86s;
top:1%;
left:72%;
}
@keyframes z{
0% {
bottom:0%;
}
100%{
height:35%;
}
}
.c{
position:absolute;
background-color:lightblue;
height:1%;
width:100%;
left:0%;
bottom:0%;
animation-name:z;
animation-iteration-count:1;
animation-duration:36s;
animation-fill-mode:forwards;
}
@keyframes hii{
0% { top:1%;
}
100%{
top:94%;
{
}
</style>
<div class="animate1"></div>
<div class="animate2"></div>
<div class="animate3"></div>
<div class="animate4"></div>
<div class="animate5"></div>
<div class="c"></div>
</body>
</html>
I hope you have learned something from here, so for more articles like this subscribe to our blog.