动画径向渐变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>