創建具有百分比值的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

回答