グラデーショングラデーションを使用したCSSトランジション

Question

私はCSS3でアニメーション/トランジションについて学んでいますが、このコードではトランジションは機能しません...なぜですか？

HTML：

<div id="test"> 
</div> 

はCSS：

#test { 
    background-color: #333; 
    background-image: -webkit-linear-gradient(top, #333, #666); 
    width: 100px; 
    height: 100px; 
    -webkit-transition: background 1s linear; 
} 

#test:hover { 
    background-image: -webkit-linear-gradient(top, #666, #999); 
} 

http://jsfiddle.net/LLRfN/

Answer 1

それが意図しなければならないので、これは私のために動作します。あなたはそれが他のブラウザで動作するようにしたい場合はカップルの事は、これが唯一のグーグルクロームで動作します：

Here is a generator

Here is an explanation

編集

私はそこにいた申し訳ありませんが実現しませんでしたそこにはtransitionの物件があります。いくつかのグーグルをして、自分でいくつかのものを試した後、背景グラデーションのトランジションは不可能です...まだです。ここで

は、それがハック

http://nimbupani.com/some-css-transition-hacks.html

Answer 2

の少しで私にその作業罰金を動作するように取得する方法について良い記事です。あなたはタグでCSSファイルをラップしましたか？

<style> 
#test { 
background-color: #333; 
background-image: -webkit-linear-gradient(top, #333, #666); 
width: 100px; 
height: 100px; 
-webkit-transition: background 1s linear; 
} 

#test:hover { 
background-image: -webkit-linear-gradient(top, #666, #999); 
} 
</style> 
<div id="test"> 
</div> 

Answer 3

それはグラデーション遷移がによって「不正行為」の少しで行うことが可能に。

CSS3 Playground

Answer 4

また、私はあなたがその場でそれを確認することができますCSS3の遊び場にあなたを指すことができ、私のために働きました私は間違いなくCSSのプロではありません（私はここで新しいので、早く嫌いではありません：D）。しかし、互いに上にdivsを置くだけです。不透明度1と0の2つです。 ホバーでは、不透明度を1から0に、またはその逆に変更します。

タイミング機能を設定しますが、これらのdivは互いに配置され、z-indexプロパティは残りの部分を行います。 多分新人道（サファリのために最適化された）が、これは（意外にも）作品完璧：

#divgradient1 
    { 
    z-index:-1; 
    height:100px; 
    background: -webkit-linear-gradient(90deg, red, blue); 
    background: -o-linear-gradient(90deg, red, blue); 
    background: -moz-linear-gradient(90deg, red, blue); 
    background: linear-gradient(90deg, red, blue); 

    opacity:1; 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index ; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

#divgradient1:hover{ 
    z-index:-1; 
    opacity:0;   
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2:hover{ 
    opacity:1; 
    z-index:2; 
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2 
    { 
    z-index:1; 
    opacity:0; 
    height:100px;   
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

と何-IT-べきルックのようなdivタグ：

<div id="divgradient1" style="position:absolute;width:100px;"></div> 
    <div id="divgradient2" style="position:absolute;width:100px;"></div> 

[Webkitのサポートのための