Переход Css3 на прозрачный фон не работает в Chrome 5

Question

Я пытаюсь создать анимацию с помощью CSS3 перехода. Анимация представляет собой градиентный фон, который должен менять свой цвет (rgba).

Я использовал тег webkit для градиента, и он работает в Chrome 5.0.375.55.

Пример кода (что-то вроде этого):

.tag {<br /> -webkit-transition: all 1.0s ease-in-out; <br /> background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62));<br /> }</p> <p>.tag: hover {<br /> background-image: -webkit-gradient(radial, 25 25, 15, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(30%, #019F62));<br /> }

Заглянув на сайт w3c, я вижу, что для перехода поддерживается "градиенты только для фонового изображения". (http://www.w3.org/TR/css3-transitions/)

Но я могу анимировать свойство background-color только с этой версией Chrome. С градиентом переход не работает.

Кому-нибудь удалось создать анимацию с градиентами фона?

Answer 1

Я попытался обернуть голову вокруг этого, и у меня возникла та же проблема. У этого парня были серьезные сообщения:

http://screenflicker.com/mike/code/transition-gradient/

и

http://virb.com/stickel/posts/text/816726

По сути, если вы установите фон, то есть: * 10101 *

#stage div#cta {
         padding: 7px;
         background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,0,255,1)), from(rgba(255,0,0,1)), color-stop(0.5,rgba(50,50,255,.1)));
        -webkit-transition: all 1.0s ease-in-out; 
}

Затем примените класс для его перехода, он ТОЛЬКО изменит свойство background-color (и вы увидите это только при наличии прозрачного ограничителя цвета)

#stage.play div#cta 
{
 background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,255,0,1)), from(rgba(0,0,255,1)), color-stop(0.5,rgba(50,50,255,.1)));
}

Answer 2

• Я знаю, что это не совсем то же самое, но обман указывает вам правильное направление.

  • Вот одна скрипка ;-) http://jsfiddle.net/nimbu/zuNbj/light/ ( источник )
  • И вот у вас есть еще один ... http://www.impressivewebs.com/animating-css3-gradients/ (Может быть, это больше, чем вы хотите, см. демо )

Удачи.

Answer 3

Градиент на основе CSS, такой как -webkit-gradient или -moz-linear-gradient и т. Д., Ведет себя как изображения. Вы не можете оживить изображение, чтобы изменить цвет, поэтому я думаю, что этого не произойдет ...