使用百分比值创建CSS动画关键帧

时间:2011-01-05 09:50:26

标签: html css3

我正在试验CSS关键帧动画和webkit径向渐变背景。我希望身体标签在3秒后有一个发光圆/径向渐变,径向渐变向右移动并消失。

在我的实验中,我发现在关键帧动画内部,您无法为每个阶段创建具有不同值的渐变,例如0%,25%,50%,100%。虽然你可以玩像素定义的背景位置%对我不起作用。

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

2 个答案:

答案 0 :(得分:0)

将渐变视为图像,对渐变的每次修改都等同于新的背景网址。 CSS动画规范没有考虑更改背景图像的可能性(这很遗憾,因为你可以很容易地创建交叉渐变)。

总之,-vendor-gradient只是“background:#color url(..)x y repeat;”

中url的替代品

答案 1 :(得分:0)

Duopixel是正确的,您无法使用关键帧为Gradient设置动画。

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

我会尝试给你一个jsFiddle

相关问题