HTML5 Бесконечная анимация фона

Question

У меня есть фоновое изображение для анимации.

Как я могу сделать бесконечную анимацию?

(Если анимация идет правой стороне страницы, я хочу видеть его в появляются в левой части страницы)

Answer 1

оригинальный код из David Walsh - CSS Background Animations

@keyframes animatedBackground { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 100% 0; 
 
    } 
 
} 
 
#animate-area { 
 
    width: 560px; 
 
    height: 400px; 
 
    background-image: url(https://davidwalsh.name/demo/bg-clouds.png); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    animation: animatedBackground 40s linear infinite; 
 
}

<div id="animate-area"></div>

Answer 2

Я разместил это, потому что вы сказали слева направо. Вы можете использовать что-то вроде этого.

#horizontal-scroll { 
 
    width: 1439px; 
 
    height: 1170px; 
 
    background: black url(https://assets.periscope.tv/images/map.svg); 
 
    -webkit-animation: backgroundScroll 50s linear infinite; 
 
    animation: backgroundScroll 50s linear infinite; 
 
} 
 
@-webkit-keyframes backgroundScroll { 
 
    from { 
 
background-position: -1439px 0; 
 
    } 
 
    to { 
 
background-position: 0 0; 
 
    } 
 
} 
 
@keyframes backgroundScroll { 
 
    from { 
 
background-position: -1439px 0; 
 
    } 
 
    to { 
 
background-position: 0 0; 
 
    } 
 
}

<div id="horizontal-scroll"></div>

Answer 3

@keyframes customname 
{ 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 


classname 
{ 
    background-image: url(Url of tyour file); 
    width: width of the file; 
    height: Height of the file; 
    background-position: 0px 0px; 
    background-repeat: repeat-x; //Repeating through X axis only 

    animation: customname 40s linear infinite; 
}