Create a vertical background animation with Css3

Creating a keyframe animation with css3 is easy.

View Demo

First create a div with a background image and add css style to it , below is the code


<div id="anim"></div>

 


@keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 0 100%; }
        }
        @-webkit-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 0 100%; }
        }
        @-ms-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 0 100%; }
        }
        @-moz-keyframes animatedBackground {
            from { background-position: 0 0; }
            to { background-position: 0 100%; }
        }
        #anim {
            margin: 30px auto;
            width: 760px; 
            height:500px;
            background-image: url(image.png);
            background-size: cover;
            background-position: 0px 0px;
            background-repeat: repeat-y;
            animation: animatedBackground 40s alternate infinite;
            -ms-animation: animatedBackground 40s alternate infinite;
            -moz-animation: animatedBackground 40s alternate infinite;
            -webkit-animation: animatedBackground 40s alternate infinite;
        }

In the animation the background position is changed starting from 0 0 to 100%. The infinite attribute tell to run the animation to never stop . The alternate is the direction of the animation.

You can also delay the animation using animation-delay property.And also pause the animation using animation-play-state property.

Useful Links for Css3 animations