How pure css animation background

Friday 30th, Dec, 2016 | # # # #

Today more than a solution I bring a challenge. I am trying to make an infinite full-screen background animation using only CSS. When we use cover property (for fullscren background image) we do not have a fixed width of the background image in order to calculate how much we should move the horizontal position so that the animation repeats itself at the beginning of the image. To solve it assign very high values of Time and horizontal background position, I will continue with the tests without using javascript to see that encounter solution for infinite css animation background.

And can you think of a way for animated background css?

My code solution for infinite background image animation css3

Css code

body {
width: 100%;
height: 100%;
background: url(scrollingBackground.png);
animation: backgroundScroll 400000s linear infinite;
 background-size: cover;
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -100000000000px 0;}
}
        
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -100000000000px 0;}
}

Try image transition css demo