動畫徑向漸變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>