1

重複の可能性:
Firefox の背景画像の CSS3 トランジションが機能しない

ここに初投稿。私は調査し、答えを見つけるのに近づいているように見えますが、単にイライラしているだけかもしれません.

背景画像のイーズインアウトの CSS3 トランジションを FF で動作させることができませんが、Chrome では動作します。

これがjsFiddle経由の私のコードです: http://jsfiddle.net/hWnf4/

HTML:

<a href="http://example.com" title="" id="logo">
<span id="logoimg"></span></a>​

CSS:

#logo {display:inline-block; padding-top:22px; text-decoration:none;font-family:'YanoneKaffeesatzRegular',"Helvetica", Arial, sans-serif;font-size:3em;margin-bottom:18px;}
#logo:link, #logo:visited {color:#fff;}
#logo:hover, #logo:active {color:#ccc;}
#logoimg {display:inline-block; width:405px; height:220px; background:url('http://www.webdesign-guru.co.uk/icon/wp-content/uploads/black-round-glassy.gif') no-repeat; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;}
#logoimg:hover {background:url('http://www.webdesign-guru.co.uk/icon/wp-content/uploads/green-round-glassy-button.gif') no-repeat;}​
4

1 に答える 1

1

これが役立つと思います。

http://oli.jp/2010/css-animatable-properties/#background-image

于 2012-07-12T04:58:33.030 に答える