0

次のコードがあります: http://jsfiddle.net/8TG8L/

HTML の別の部分ではトランジション CSS をうまく機能させることができますが、右側ではトランジションを遅延させることができません。

関連コード:

.home_subvid_hover {
    background-image:url('http://www.ptroa.com/images/video_hover.png');    
    /*background-repeat:no-repeat;*/
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

編集：

明確にするために、このコードを見てください: http://jsfiddle.net/9UuY7/

最初のものと同じ原理ですが、それは機能しますが、それはなぜですか? ありがとう、

4

3 に答える 3

0

あなたの CSS は、背景画像を何もないものから画像に変更しています。これは、現在の世代の CSS ではアニメーション化できません。

于 2013-05-23T18:01:50.653 に答える
0

none背景画像を から画像に移行することはできません。 MDN のこのドキュメントを参照してください。画像から画像への移行も、ブラウザのサポートが優れているわけではありません。私の知る限り、Chrome でのみサポートされています。

ただし、異なるマークアップ/CSS を使用して同様の効果を作成できます。

opacity: 0;で非表示にし、ホバーしたときに遷移する要素はどうopacity: 1;ですか?

于 2013-05-23T18:11:17.523 に答える