animate radial-gradient CSS3 : move from left to right? [duplicate] - css

Question

This question already has answers here:
How to animate a radial-gradient using CSS?
(3 answers)
Closed 2 years ago.
I want animate a background with a radial-gradient radial-gradient(circle, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 100%), to move it from left to right
http://jsfiddle.net/odsb1fjh/2/
how can I do to animate this radial-gradient to move infinite on div from left to right?
I have already try animation and keyframe background-position: left/right bottom; but don't works.

Answer 1

Try this
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>
or this
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>

Answer 2

"but we can see the border of "square" where is the light radial" - Why use radial background at all, simply use:
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: rgb(255, 255, 255);
background: linear-gradient(
90deg,
rgba(250, 250, 250, 0) 0%,
rgba(250, 250, 250, 0.5) 60%,
rgba(250, 250, 250, 0) 100%
);
-webkit-animation: animation 3s ease-in-out infinite;
}
#-webkit-keyframes animation {
from {
left: -250px;
}
to {
left: 250px;
}
}
<div></div>