Moving Background image using CSS

CSS describes how html elements should be render on screen. We can move the background image using CSS3 animation property that gives an illusion of running video. CSS3 animation is supported by all modern browsers.
An animation lets an html element gradually change from one style to other. You need to specify keyframe to use animation. As shown below-

[html]@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -180px 0px;}
}[/html]

In order to support animation in different browsers you must mention vender prefix of that browser with keyframe.

[html]@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -180px 0px;}
}[/html]

Now call this keyframe style in your css-

[html]body {
color:#fff;
text-align:center;
background-image: url(‘https://s32.postimg.org/kkh3jlm1h/image.jpg’);
background-repeat: repeat;
background-attachment: fixed;
background-size: cover;
font-size: 12px;
font-family: ‘Dancing Script’, cursive;
-webkit-animation: backgroundScroll 15s linear 1;
-webkit-animation-fill-mode: forwards;
animation: backgroundScroll 15s linear 1;
animation-fill-mode: forwards;
}[/html]

Explanation of CSS3 animation-
a) “backgroundScroll” is name of keyframe style or animation name.
b) “15s” defines the animation duration.
c) “linear” is animation timing function. Its value can be ease, ease-in, ease-out or ease-in-out.
d) “1” is the value of animation iteration count. Its value can be infinite as per requirement.
e) “animation-fill-mode: forwards” prevents background image to return back to its original position after completing its specified animation iteration count.

Click here for Live Demo