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

Question

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

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

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

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

.tag: hover {
background-image: -webkit-gradient(radial, 25 25, 15, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(30%, #019F62));
}

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

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

Удалось ли создать анимацию с помощью фоновых градиентов?

Answer 1

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

Answer 2

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

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

и

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

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

#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 3

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

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

Удачи.