13

css3 に画像とグラデーションが定義された背景画像があります。また、クラスが on_time -> too_late から、またはその逆に変更されたときにトランジションが必要です。

グラデーションでトランジションを取得できません。これはどういうわけかcss3でサポートされていますか?

ありがとう

div.too_late
{
    color: White;        
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);       

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;    
}

div.on_time
{
    color: #222;        
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);    

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;           
}
4

3 に答える 3

9

背景のグラデーションにトランジションを適用することはできません。しかし、このリンクを見て「ハック」で動作させることができます: http://nimbupani.com/some-css-transition-hacks.html

background-position shift を使用して、変化しているように見せることもできます: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

ところで、より多くのリンクと情報を含む同様の質問があります:グラデーションの背景で CSS3 トランジションを使用する

于 2013-01-17T14:12:34.207 に答える
6

「グラデーションはまだトランジションをサポートしていません (仕様ではそうすべきだと言っていますが)。背景のグラデーションでフェードイン効果が必要な場合は、コンテナに不透明度を設定し、不透明度をトランジションする必要があります。」

出典:グラデーション背景で CSS3 トランジションを使用する

于 2013-01-17T16:09:49.417 に答える
3

プロパティbackground-imageはサポートされていません

http://www.w3.org/TR/css3-transitions/#animatable-css

于 2013-01-23T02:27:38.967 に答える