创建具有百分比值的CSS动画关键帧

我正在试验CSS关键帧动画和webkit径向渐变背景。我希望身体标记在3秒后有一个发光的圆/径向渐变，径向渐变向右侧移动并消失。创建具有百分比值的CSS动画关键帧

在我的实验过程中，我发现在关键帧动画中，您无法为每个阶段（如0％，25％，50％，100％）创建具有不同值的渐变。虽然你可以用像素定义的背景位置进行游戏，但对我而言并不适用。

我的HTML文件发布在这里，请看看。 http://jsbin.com/erevo3/2

2011-01-05 najam

请更改标题，链接什么也不做说的问题:) – 2011-01-05 09:55:29

想象渐变，就好像它们是图像一样，对渐变的每次修改都等同于新的背景网址。 CSS动画规范并没有考虑改变背景图像的可能性（这很遗憾，因为你可以很容易地创建交叉渐变）。

总之，-vendor-gradient只是“background：#color url（..）x y repeat”中url的替代物;“

2011-01-05 11:14:39 Duopixel

为什么在％没有内部CSS关键帧动画工作背景位置???任何想法 – najam 2011-01-05 11:37:47

看起来像一个bug给我，如果你使用一个图像与％它的工作http://jsbin.com/erevo3/4/edit，并与像素值的梯度（如你已经提到） – Duopixel 2011-01-05 11:52:26

所以我刚刚发现一个bug：P任何奖项:) – najam 2011-01-05 12:24:51

Duopixel是正确的，您无法使用关键帧为Gradient制作动画效果。

你可以做的是创建两个绝对定位的div，并使用淡入淡出来创建发光效果。然后你可以制作他们的位置并隐藏它们。

我会尽量给你的jsfiddle

2013-08-29 05:55:15

回答