7

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/

4

4 に答える 4

2

これは意図したとおりに機能します。いくつかのこと、これは他のブラウザで動作させたい場合、Google Chrome でのみ動作します:

ここに発電機があります

ここに説明があります

編集

transitionすみません、そこに物件があることに気づきませんでした。いくつかのグーグルを行って自分でいくつか試してみた後、背景のグラデーションでの遷移が不可能であることは明らかです...まだ.

これは、ちょっとしたハックで動作させる方法に関する良い記事です

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

于 2011-10-17T17:32:16.583 に答える
0

グラデーション遷移は、少しの「ごまかし」で行うことができます。私は間違いなくcssのプロではありません（そして、私はここにいるのは初めてなので、早く私を嫌いにならないでください:D）、1つは不透明度1、もう1つは0のdivを互いに重ねて配置するだけです。（各divは設定されていますさまざまなグラデーション) ホバー時に、不透明度を 1 から 0 に、またはその逆に変更します。

タイミング関数を設定しますが、これらの div は互いの z-index プロパティに配置されますが、残りは行います。(Safari 用に最適化) 初歩的な方法かもしれませんが、これは (驚くほど) 完全に機能します。

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

そして、それがどうあるべきかのdiv：

    <div id="divgradient1" style="position:absolute;width:100px;"></div>
    <div id="divgradient2" style="position:absolute;width:100px;"></div>
于 2014-01-26T00:26:27.657 に答える
0

それは私にとってはうまくいきました。また、その場で確認できる

CSS3 Playgroundを紹介することもできます。

于 2011-10-17T18:07:36.080 に答える
0

私にはうまくいきます。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>
于 2011-10-17T17:33:09.080 に答える