Css3 동영상 : 동영상 이미지 위에서 아래로

Question

zeaklous가 왼쪽에서 오른쪽으로 원활하게 움직이는 물을 움직이는 데 도움이되는 좋은 대답으로 나를 도와주었습니다.

그래서 나는 똑같은 방법을 사용하는 것이 효과가있을 것이라고 생각했지만, 뭔가 빠진 것처럼 느꼈다.

html로는 다음과 같습니다

<div id="waterfall"></div> 

는 CSS는 : 나는 캔트 어떤 애니메이션이 작동하도록, 세트 45 픽셀 폭을 만들 때

#waterfall { 
background: url(img/waterfall.png); 
background-repeat: no-repeat; 
width: 100%; 
height: 1200px; 
position: absolute; 
top: 1150px; 
right: 870px; 
z-index: 5; 
-webkit-transition: flow 3s ease-out; 
    -moz-transition: flow 3s ease-out; 
    -o-transition: flow 3s ease-out; 
    transition: flow 3s ease-out; 

animation: flow 2000s linear infinite; 
} 

@keyframes flow { 
100% {background-position: 0 0;} 
0% {background-position: 0 100000%;} 
} 

몇 가지 문제가 있었다. 그래서 100 %로 설정했지만 그때는 사라지고 다시 찾을 수 없습니다.

애니메이션을 수평으로 바꾼다면 width : 100 %로만 작동합니다. 수직 동작을 시도하면 그다지 효과가 없습니다.

내가 여기에없는 것은 수직 애니메이션과 다른 것입니까?

모든 도움을 주시면 대단히 감사하겠습니다.

Answer 1

나는 많은 문제가 background-repeat: no-repeat;과 관련이 있다고 생각합니다. 애니메이션이 설정된 방식으로 반복을 사용하여 흐름을 만듭니다. no-repeat을 (를) 켜면 만기 된 플로우가 중단됩니다 (이미지 반복에 의존하기 때문에). Here is a demo에 코드를 빼고이 라인을 꺼내고 flow의 %를 고정 (절대 위치 지정으로 인해 애니메이션을 보려면 아래로 스크롤)합니다. 당신은 그것이 지금 무엇을하는지 볼 수 있습니다, 나는 당신이 그것을 결국 어떻게 보이기를 원하지는 모르겠습니다.

수평 효과 애니메이션에서 수직 효과 애니메이션으로 변경하는 데 문제가 없어야합니다.이 새로운 데모에서는 두 효과가 별도로 표시됩니다. http://cssdeck.com/labs/mjsrldib을하면 문제가 귀하의 질문에이 폭포처럼 떨어졌다 뭔가를 시도하기 위해 저를 묻는 메시지가

편집 만들어 볼 수있는 다시에서 background-repeat: no-repeat;을 넣으면 : 내가 한 모두는 after 애니메이션에서 x와 y 값을 전환했다 그러나 여전히 물 요소처럼 옆으로 움직였습니다. Here is what I came up with 짧은 시간에 나는 그것에 종사했다. 그것은 어쨌든 유용하다고 증명할 수 있습니다