Create a vertical background animation with Css3
Creating a keyframe animation with css3 is easy.
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.