Css3-Übergang auf transparentem Hintergrund funktioniert nicht in Chrome 5

Question

Ich versuche, eine Animation mit CSS3-Übergängen zu erstellen. Die Animation ist ein Farbverlauf Hintergrund, der seine Farbe (rgba) ändern sollte.

Ich habe das Webkit-Tag für den Farbverlauf verwendet und es funktioniert in Chrome 5.0.375.55.

Beispielcode (etwa so):

.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)); }

Ein Blick in w3c Website sehe ich, dass "background-image - nur Gradienten" für den Übergang unterstützt wird. ( http://www.w3.org/TR/css3-transitions/ )

Aber ich kann nur die Eigenschaft background-color mit dieser Version von Chrome animieren. Mit Farbverlauf funktioniert der Übergang nicht.

Ist es jemandem gelungen, eine Animation mit Hintergrundverläufen zu erstellen?

Answer 1

Ich habe versucht, mir darüber klar zu werden, und hatte das gleiche Problem. Dieser Kerl hatte einige solide Beiträge:

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

et

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

Im Wesentlichen, wenn Sie den Hintergrund, d.h.:

#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; 
}

Wenden Sie dann eine Klasse für den Übergang an, die NUR die Eigenschaft "Hintergrundfarbe" ändert (und Sie werden dies nur sehen, wenn Sie einen transparenten Farbstopp haben)

#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

• Ich weiß, dass es nicht genau dasselbe ist, aber colud zeigt Ihnen die richtige Richtung.

  • Hier ist eine Fiedel ;-) http://jsfiddle.net/nimbu/zuNbj/light/ ( Quelle )
  • Und hier haben Sie eine weitere ... http://www.impressivewebs.com/animating-css3-gradients/ (Vielleicht ist dies eher das, was Sie wollen, siehe die Demo )

Viel Glück!

Answer 3

Ein CSS-basierter Farbverlauf wie -webkit-gradient o -moz-linear-gradient usw. verhalten sich wie Bilder. Man kann ein Bild nicht wirklich animieren, die Farbe zu ändern, also denke ich, dass es nicht passieren wird...