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; 
}