div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

나는 여기에 지금까지 내 코드, 애니메이션을 만드는 데 약간의 CSS를 배우고 : 나는 너무 코드를 포함 StackExchange에 따라하지 않고 jsfiddle 링크를 게시 할 수 없기 때문에div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

https://jsfiddle.net/1u678gcy/

가 여기 내 HTML :

a#swipe1 {transition-timing-function: linear; position: absolute; animation: mymove 1s forwards;} 
@keyframes mymove{from {left:0%; top:100px; opacity:1;} to {left:60%; top:100px; opacity:0; }} 
#mydiv {text-align:center; background:blue; max-width:50%; margin-left:auto; margin-right:auto; display:block}

당신이 그것을로드

, 첫 번째 : 여기

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body style="background-color:#111111"> 
    <img src="https://www.benngrant.com/html5/shape1.svg" /> 
    <br> 
    <br> 
    <br> 
    <div id="mydiv"> 
     <br><br><br> 
     <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /> 
     </a> 
     <br><br><br><br> 
    </div> 
    </body> 
</html>

... 그리고 내 CSS입니다 이미지는 움직이는 SVG 그래픽의 정적 이미지입니다.

그럼 내 div 인 파란색 상자가 있습니다.

그런 다음 div가 왼쪽에서 오른쪽으로 움직이는 동일한 이미지의 사본을 중첩하여 페이지가로드 될 때마다 애니메이션을 실행합니다.

문제는 div의 왼쪽과 오른쪽 테두리가 애니메이션을 "클립"하기를 원하므로 이미지가 왼쪽에서 파란색 상자로 들어가고, 오른쪽에서 확대되고, 오른쪽에서 빠져 나오기를 바랍니다. 파란색 상자의 바깥쪽에 이미지가 보이지 않아도 절대 보지 마십시오.

불투명도는 수정되지 않습니다. 이미지가 div 상자의 절반 인 경우 상자의 절반은 보이지만 절반은 보이지 않기 때문입니다.

기본적으로 오른쪽과 왼쪽으로 애니메이션을 자르므로 입력 된 이미지를 볼 수 있고 나갈 수 있습니다.

내가 알고있는 자바 스크립트를 사용하지 않고 HTML과 CSS를 사용하여이를 수행 할 수있는 방법이 있습니까?

출처

2017-12-30 Sindyr

시도는이 클래스에 넣어 그것을했다 –

먼저 div를 상대 위치로 지정해야 내부에서 항목을 제어 할 수 있습니다. 다음은 몇 가지 예입니다 : {오버 플로우 : 숨겨진;} #mydiv :

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .swipe1 {transition-timing-function: linear; position: absolute; animation: mymove 1s forwards;} 
      @keyframes mymove{from {left:0%; opacity:1;} to {left:60%; opacity:0; }} 
      #mydiv {text-align:center; background:blue; max-width:50%; overflow: hidden; position: relative; margin-left:auto; margin-right:auto; display:block} 
     </style> 
    </head> 
    <body style="background-color:#111111"> 
      <img src="https://www.benngrant.com/html5/shape1.svg" /> 
     <br> 
     <br> 
     <br> 
     <div id="mydiv"> 
      <br><br><br> 
      <img class="swipe1" src="https://www.benngrant.com/html5/shape1.svg" /> 
      <br><br><br><br> 
     </div> 
    </body> 
</html>

출처

2017-12-30 02:55:59

을. 오버플로 추가 : 숨김 의미가 있지만 위치 : 상대가 필요한 것 같은 이유가 확실하지 않지만 그렇습니다. 감사!!! – Sindyr

div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

답변

관련 문제