Градиент в Хроме

[Vlad]

Сделал такой простой градиент.

 

http://jsfiddle.net/1k7arm03/

 

В Хроме и Опере возникает странная проблема - градиент оказывается сдвинутым в некоторых местах, особенно это заметно при открытии на весь экран или изменении размера окна. Помогает добавление координат 0 1px или 1px 0 или что-то ещё, но не 0 0. Что за странный баг, кто знает?

[Vlad]

Ещё выяснил, что Firefox не умеет анимировать градиент и Хром тоже, у него не плавная анимация, а скачком происходит. Firefox вообще ничего не показывает.

 

http://jsfiddle.net/og3mpxms/1/

[afdw]

Ещё выяснил, что Firefox не умеет анимировать градиент и Хром тоже, у него не плавная анимация, а скачком происходит. Firefox вообще ничего не показывает.

 

http://jsfiddle.net/og3mpxms/1/

Это по сути невозможно, так как градиент - это такая же картинка, только генерируемая браузером, а картинки в CSS анимировать нельзя.

 

UPD: Это - очень забогованная вещь: http://jsfiddle.net/og3mpxms/2/ .

Edited April 1, 2015 by afdw

[Vlad]

Нельзя анимировать градиент? IE не согласен, да и остальные браузеры тоже умеют это делать, только не для данного примера.

[afdw]

Нельзя анимировать градиент? IE не согласен, да и остальные браузеры тоже умеют это делать, только не для данного примера.

Можно пример с Chrome или Firefox? В данный момент видел анимацию только с помощью тени, изменения положения и размера.

Edited April 2, 2015 by afdw

[Vlad]

Вот здесь анимация градиента показана. Т.е. не самого градиента, а фона сделанного с его помощью.

http://htmlbook.ru/blog/poloski-pri-navedenii

[forest_moss]

Ещё выяснил, что Firefox не умеет анимировать градиент и Хром тоже, у него не плавная анимация, а скачком происходит. Firefox вообще ничего не показывает.

 

http://jsfiddle.net/og3mpxms/1/

если не они, то кто?)

мой восьмой IE вообще не открывает jsfiddle, opera и safari тоже не показывают красивой плавной анимации этого примера.

Edited April 3, 2015 by forest_moss

[Vlad]

Восьмой IE? Что это такое вообще, что за диплодок! Открою маленький секрет - браузеры можно обновить и тогда Интернет станет гораздо красивее и дружелюбнее.

[monochromer]

Нельзя анимировать градиент?

Насколько я знаю, анимировать можно только background-position. Даже если некоторые браузеры анимируют background-image, это как-то неправльно. Например, мы точно можем знать от какого до какого значения будет меняться background-position, задаем функцию прогресса анимации и пр. А каков алгоритм смены самой картинки?

 

Эксперименты с анимацией градиентов есть в блоге Юлии Бахваловой:

• http://css.yoksel.ru/animation-for-gradients/
• http://css.yoksel.ru/animated-gradients-2/

[antonKar]

градиенты через svg можно только нормально анимировать

[afdw]

Вот здесь анимация градиента показана. Т.е. не самого градиента, а фона сделанного с его помощью.

http://htmlbook.ru/blog/poloski-pri-navedenii

В данный момент видел анимацию только с помощью тени, изменения положения и размера.

Этот пример как раз с изменением положения.

[forest_moss]

Восьмой IE? Что это такое вообще, что за диплодок! Открою маленький секрет - браузеры можно обновить и тогда Интернет станет гораздо красивее и дружелюбнее.

эм.. разве на windows xp можно установить 9 ie?

на пиратский к тому же

ну а так то мой "интернет" прекрасен с полностью обновленным мозиллой, пока кроссбраузерность проверять не надо