Создание ключевых кадров анимации CSS с процентными значениями

Question

Я экспериментирую с анимацией ключевого кадра CSS и векторами радиального градиента webkit. То, что я хочу, чтобы тег тела имел светящийся круг/радиальный градиент через 3 секунды, радиальный градиент перемещается в правую сторону и исчезает.

Во время моего эксперимента я обнаружил, что внутри анимации ключевого кадра вы не можете создавать градиенты с разными значениями для каждого этапа, например, 0%, 25%, 50%, 100%. Хотя вы можете играть с фоновой позицией, определенной в пикселях,% не работает для меня.

Мой HTML-файл размещен здесь, пожалуйста, посмотрите. http://jsbin.com/erevo3/2

Answer 1

Подумайте о градиентах, как если бы они были изображениями, каждая модификация вашего градиента эквивалентна новому фону. Спецификация анимации CSS не предусматривает возможности изменения фоновых изображений (что является позором, потому что вы можете легко создавать кроссфейды).

Таким образом, -vendor-gradient является просто заменой url в «background: #color url (..) x y repeat;»

Answer 2

Duopixel прав, вы не можете анимировать Gradient, используя ключевые кадры.

Что вы можете сделать, создайте два абсолютных позиционированных divs и поиграйте со своим выцветанием, чтобы создать эффект свечения. Затем вы можете анимировать свои позиции и спрятать их.

Я попытаюсь дать вам jsFiddle