루핑 배경 무엇을 사용해야합니까?

Question

안녕하세요, 동료 개발자 및 교육자입니다.

오늘은이 웹 사이트 헤더 https://www.premiumsmoking.com/nl/e-sigaret/megatwix.html

내가 그것을 리메이크하려고, 그래서 아주 멋진라고 생각 루핑 계속 연기 효과에 대한이 멋진 효과를 보았다

내가이 사용하는 CSS 애니메이션을하려고 노력 하지만 내가 발견 한 문제는 이있는 div가 80 % 같이있는 경우 div에 남아있는 검은 색 공간을보기 시작한 때였습니다.

나는 그것의 끝없는 고저처럼 보이는 것을 만들고 싶다. (fadein와 아마 뭔가?)

이 코드는 지금

.element { 
    width:3000px; 
    height:1000px; 
    background-image:url(moveimage1.png); 
    position:relative; 
    margin:10px; 
    z-index: -1; 

animation:myfirst 200s infinite; 
} 
@keyframes myfirst 
    { 
0% {opacity: 0.25; margin-left: -1500px; } 
50% {opacity: 1;} 
100% {opacity: 0.25; margin-left: 1000px; } 
} 

내가 정말 사람이 "문제"를 도와 줄 수 있기를 바랍니다

이있다

(IM이 게시물에 뭔가 잘못하고있는 경우 죄송합니다, 처음 메신저에 스택 오버플로에 대한 질문을)

내 질문을 읽으려면 이미 thx.

이이 내 마지막 코드

또한 사용하고자하는 모든 사람에 대한

입니다 --edit-- : 로키에 대한

.element { 
    width:100%; 
    height:1000px; 
    background-image:url(moveimage1.png); 
    background-size: 3000px 1000px; 
    float: left; 
    position:relative; 
    z-index: -1; 

animation:myfirst 10s infinite linear; 
} 
@keyframes myfirst 
    { 
0% {opacity: 0.25; background-position: 0; } 
50% {opacity: 1;} 
100% {opacity: 0.25; background-position: 3000px; } 
} 

많은 고맙습니다 당신은 블록을 이동하려는

Answer 1

, 그 안의 배경이 아닙니다. background-position 속성을 애니메이션화하는 것이 좋으며 margin-left이 아니라 애니메이션을 사용하는 것이 좋습니다. 배경 이미지가 반복되는 한 더 이상 검은 색 공간이 없습니다.