방사형 그라데이션 적용 CSS3 : 왼쪽에서 오른쪽으로 이동 하시겠습니까?

Question

내가 방사형 구배 radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%)와 배경을 애니메이션하려면, 왼쪽에서 오른쪽으로 사업부에 무한 이동이 방사형 그라데이션 애니메이션을 마우스 오른쪽

http://jsfiddle.net/odsb1fjh/2/

어떻게 내가 할 수있는 왼쪽에서 이동하려면?

애니메이션 및 키 프레임 배경 위치를 이미 시도했습니다. 왼쪽/오른쪽 하단. 하지만 작동하지 않습니다.

Answer 1

이

div 
 
{ 
 
    position:absolute; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: black; 
 
    background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png) 
 
} 
 

 
div:after 
 
    { 
 
    content:''; 
 
     position:absolute; 
 
     top:0; 
 
     left:0; 
 
     width:100%; 
 
     height:100%; 
 
    background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%); 
 
    background-position: -1500px 0; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: animation 3s ease-in-out infinite; 
 
} 
 
@-webkit-keyframes animation { 
 
    from {background-position: -250px 0;} 
 
    to {background-position: 250px 0;} 
 
}

<div></div>

또는이

div 
 
{ 
 
    position:absolute; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: black; 
 
    background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png); 
 
    overflow:hidden 
 
} 
 

 
div:after 
 
    { 
 
    content:''; 
 
     position:absolute; 
 
     top:0; 
 
     left:0; 
 
     width:100%; 
 
     height:100%; 
 
    background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%); 
 
    -webkit-animation: animation 3s ease-in-out infinite; 
 
} 
 
@-webkit-keyframes animation { 
 
    from {left: -250px;}/**you can use translate3d(-250px,0,0)*/ 
 
    to {left: 250px;}/** translate3d(250px,0,0)*/ 
 
}

<div></div>