스크롤/마키 (marquee) 유형 효과를 내 배경 이미지에 적용 할 수있는 방법이 있습니까?

Question

애니메이션 키 프레임을 사용하여 다양한 방법으로 시도해 보았습니다. 나는 그것을 할 수 없을 것 같습니다.

기본적으로 내 배경은 왼쪽에서 오른쪽으로 움직이고 반복 윤곽처럼 내 배경으로 사용하고 싶습니다.

나를위한 유일한 해결책은 내 배경에 gif를 만드는 것 인 것처럼 보이지만, 실제로는 시간이 많이 걸립니다.

Answer 1

를 작동하게하는 I repeat-x으로 이미지를 x 코드와 같은 엄청난 양으로 이동시킵니다. 이 :

html { 
 
    margin:0;padding:0; height:100%; 
 
} 
 
body { 
 
    height:100%; 
 
    background-image:url(https://i.imgur.com/aCDecXL.jpg); 
 
    background-size: auto 100%; 
 
    overflow:hidden; 
 
    background-repeat:repeat-x; 
 
    animation: scroll 700000s infinite linear; 
 
    
 
} 
 
@keyframes scroll { 
 
    from { background-position: 0%; } 
 
    to { background-position: 90000000%; } 
 
}

Answer 2

시도해보십시오.

#animate-area { 
 
    width: 560px; 
 
    height: 400px; 
 
    background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png'); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    animation: animatedBackground 40s linear infinite; 
 
} 
 
@keyframes animatedBackground { 
 
    from { background-position: 0 0; } 
 
    to { background-position: 100% 0; } 
 
}

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

Answer 3

를 사용하여 애니메이션 키 프레임은 (는 끝을 reachs 후 다시 시작) 애니메이션에서 점프를 피하기 위해

.background{ 
 
background: url(https://dummyimage.com/1500x700/); 
 
    width: 560px; 
 
\t height: 400px; 
 
background-position: 0px 0px; 
 
\t background-repeat: repeat-x; 
 
    background-size: cover; 
 
    animation: animation_back 2s linear infinite; 
 
} 
 
@keyframes animation_back { 
 
\t from { background-position: 0 0; } 
 
\t to { background-position: 200% 0; } 
 
}

<div class="background"> 
 

 
</div>