How to make shower animation using html, css and javascript.

In this article we will learn to make a shower animation. After completion the animation will look like this. And after the end of this tutorial you will get the source code of this animation.

Now we will learn to make this animation in these simple steps.

Step 1:- First set up your html file. For this open notepad++ or any other application and make a html file like ‘shower.html’. Now in this file put the following code:

<html>
<head>
<style></style>
</head>
<body>
<script></script>
</body>
</html>

Step 2:- Now make an animation with name animation. For doing this put simply this code in style tag



@keyframes animation{
0%{top:58%; opacity:1;}
100%{top:100%; opacity:1;}
}

Step 3:- Now we have to create a div with desired background-image and size and have to print at a random position. After printing the div we have to add animation to div which is ‘animatiom’. For doing this add the following code inside script tag.

This is the complete source of code of this shower animation.

Source code

Copy code

this is the end