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

Question

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

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

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

Answer 1

Duopixel прав, вы не можете анимировать градиент с помощью ключевых кадров.

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

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

Answer 2

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

В итоге, -vendor-градиент является просто заменой URL вbackground: #color url (..) xy repeat; "