Creating CSS animation keyframes with percentage values

I am experimenting with CSS ke开发者_开发技巧yframe animations and webkit radial gradient backgrounds. What I want on body tag to have a glowing circle /radial gradient after 3 sec the radial gradient moves to right side and disappear.

During my experiment I found that inside keyframe animations you can't create gradients with different values for each stage like 0%, 25%, 50%, 100%. Although you can play with background-position defined in pixels % is not working for me.

My HTML file is posted here, please take a look. http://jsbin.com/erevo3/2

Think about gradients as if they were images, every modification to your gradient is equivalent to a new background url. The CSS animation spec doesn't contemplate the possibility of changing background images (which is a shame, because you could create crossfades very easily).

In summary, -vendor-gradient is just a substitute of url in "background: #color url(..) x y repeat;"

Duopixel is right, you cannot animate Gradient using keyframes.

What you can do is, create two absolute positioned divs and play with their fade to create a glow effect. Then you can animate their positions and hide them.

I will try to give you a jsFiddle