CSS3 Animated Radial Gradient: Move Left to Right?
I want to 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 infinitely on the div from left to right?
I've already tried animating and base keyframe position: left / right bottom; but doesn't work.
+3
source to share
1 answer
try it
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
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>
+2
source to share