그라데이션으로 채워진 정사각형에서 오른쪽 사다리꼴로의 애니메이션 변환

Question

그래디언트로 채워진 사각형에서 오른쪽 사다리꼴로 애니메이션을 가져와야합니다. 제가 한 일은 이렇습니다 : http://jsfiddle.net/7Aav7/.

#box { 
    border-bottom: 100px solid transparent; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 50px; 
    background-origin: border-box; 
    background-image: -webkit-linear-gradient(blue, yellow); 
    border-right: 0px solid white; 
    -webkit-animation: rightTrapezoid 2s infinite alternate; 
} 
@-webkit-keyframes rightTrapezoid { 
    to { 
     border-right-width: 50px; 
    } 
} 

그러나이 경우에 내 오른쪽 테두리 흰색 - 그리고 나는 (바디 컬러와 연결되는 것은 아니다) 투명해야합니다. 이것을 달성 할 수있는 방법이 있습니까? 그것은 CSS 변환으로 가능합니까? 도움을 주신 모든 분들께 감사드립니다.

Answer 1

여기 내 해결책은 래퍼 div를 사용하는 것입니다.

(지루한) HTML : 내부 사업부에서

<div id="container"> 
<div id="inner"> 
</div> 
</div> 

, 표준 물건. 오직주의 부정적인는

@-webkit-keyframes rightTrapezoid { 
    to { 
     -webkit-transform: skew(30deg,0deg); 
    } 
} 

이 사업부의 양쪽에 애니메이션을 생성 스큐 사용

#inner { 
    width: 400px; 
    height: 150px; 
    left: -50px; 
    position: absolute; 
    background-image: -webkit-linear-gradient(blue, yellow); 
    -webkit-animation: rightTrapezoid 2s infinite alternate; 
} 

및 애니메이션을 떠났다. 왼쪽의 움직임을 숨기려면, 나는

#container { 
    left: 55px; 
    top: 0px; 
    width: 400px; 
    height: 150px; 
    position: absolute; 
    overflow: hidden; 
} 

here is the fiddle