Rain CSS Animation

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Are you looking for a great animation for your backgrounds or do you want to animate your headers?

This is the animation you are looking for.

rain css animation

Well then let’s start, then you will find the html text for the section where our rain animation effect will be:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Stylesheets-->
        <link rel="stylesheet" href="style.css">

        <!--Title-->
        <title>JUANJIMENEZTJ | CSS Rain Animation
    </head><!--End head-->
    <body>
        <section>

        </section>
    </body><!--End body-->
</html><!--End html-->

CSS

The CSS code has been divided into two sections to make it better understandable to us.

In the first section we have the Rain CSS effect better known as keyframes since as you know, this rain animation will be with pure css.

KeyFrames:

/*      background rain color change    */
@-webkit-keyframes color-change {
    0%,100% { filter: hue-rotate(0deg) }
    50% { filter: hue-rotate(360deg) }
}
@-o-keyframes color-change {
    0%,100% { filter: hue-rotate(0deg) }
    50% { filter: hue-rotate(360deg) }
}
@-moz-keyframes color-change {
    0%,100% { filter: hue-rotate(0deg) }
    50% { filter: hue-rotate(360deg) }
}
@keyframes color-change {
    0%,100% { filter: hue-rotate(0deg) }
    50% { filter: hue-rotate(360deg) }
}

/*    Rain Animation     */
@-webkit-keyframes rain {
    0% { background-position: 0 0 }
    100% { background-position: -10% 100% }
}
@-o-keyframes rain {
    0% { background-position: 0 0 }
    100% { background-position: -10% 100% }
}
@-moz-keyframes rain {
    0% { background-position: 0 0 }
    100% { background-position: -10% 100% }
}
@keyframes rain {
    0% { background-position: 0 0 }
    100% { background-position: -10% 100% }
}

to finish, below you have the general CSS code to complete our great rain animation with pure CSS.

CSS

/*     General styles     */
* { 
    margin: 0; 
    padding: 0 
} 
section { 
    animation: color-change 2s linear infinite; 
    background-image: url(image001.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 100vh; 
    position: relative; 
    width: 100% 
} 
section:before {
    animation: rain 0.2s linear infinite;
    background-image: url(image002.png);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

I hope you enjoyed this great rain animation with pure CSS that you can use in your backgrounds, headers, sections, etc. When you need them, you can use it without problems since you are using pure CSS.

Below for a demo link where you can view this great rain animation with pure css.

More to explorer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sign up to receive our amazing newsletters and gifts