pure css rain effect

1/* This is a pure css Rain effect just put a <section></section> in your html file */
2
3section { 
4    width: 100%; 
5    height: 100vh;
6    position: relative;
7    position: absolute; 
8    top: 0; 
9    left: 0; 
10    background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png); 
11    animation: rain 0.4s linear infinite; 
12    opacity: 0; 
13}
14
15@keyframes rain { 
16    0% { 
17        background-position: 0 0; 
18        opacity: 1; 
19    } 
20
21    100% { 
22        background-position: 10% 100%; 
23        opacity: 1; 
24    } 
25}