Firefoxの背景画像のCSS3遷移が機能しない

Chromeで背景画像の切り替えがうまくいきましたが、Firefoxでは何もしません。私はCSS3トランジションが初めてです。研究と私の構文が正しいと思われました。私がFFを読んでいるからこれをサポートする必要があります。私はFF 12.0です。どのようにこのCSS3の移行はFirefoxで動作しません。Firefoxの背景画像のCSS3遷移が機能しない

いいえjavascript。回避策はありません。なぜこれが失敗しているのかの説明はすばらしいでしょう。

http://jsfiddle.net/VCdGt/3/

a.call_to_action 
{ 
    text-decoration: none; 
    display: block; 
    color: #232744; 
    font-size: 20px; 
    font-weight: bold; 
    height: 47px; 
    width: 185px; 
    overflow: hidden; 
    margin: 10px auto 15px auto; 
    text-align: center; 
    border: none; 
    background: yellow; 
    background-image: url(http://www.pslover.com/images/thumb/2751.jpg); 
    -webkit-transition: background-image .5s linear; 
    -moz-transition: background-image .5s linear; 
} 

a.call_to_action:hover { 
    background: orange; 
    background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif); 
    color: #4F4246; 
}

出典

2012-04-27 mrtsherman

私は何らかの理由でIE9とFFがgifをサポートしていないと思います。私はあなたがいくつかのスプライトを作成し、 'js'SetInterval＆画像を変更し続けるようにしなければならないと思うかもしれませんが、スムーズな移行のために入れなければならないスプライトの量には厄介です。 – uday

@uDaY - 提案いただきありがとうございます。私は実際にpngをローカルで使用しているので、それはそれだとは思わない。私はデモのためにウェブからそれらの画像をつかんだだけです。私はこれにjsを使いたくない。私は、むしろjsを使うよりも、それを完全に先取りするだろう。 – mrtsherman

pngの場合は、CSSスプライトを見てみましたか？ – uday

MDNドキュメントで答えを見つけました。

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

背景画像

これは現在のワーキングドラフト、全てでは何もありません背景画像における「唯一勾配」と、アップ少し空気にまだありますCSS 背景と罫線モジュールレベル3編集者の下書きの背景画像の場合は、現在編集者草案とアニメーション可能：いいえ。ただし、のサポートはChrome 19のCanaryに登場しました。これはのデザイナーが欲しいものです。広範なサポートが到着するまで、これはイメージスプライトと背景位置または不透明度によって偽装することができます。

現時点では、誰も実際にグラデーション（Chrome 17、FF 12、IE9）をサポートしていないことがわかりました。 Chromeのみが背景画像をサポートしています（そのため、私にとってはFFで動作しません）。 FirefoxでのWebKitで http://dev.w3.org/csswg/css-backgrounds/#background-image

作品罰金はありません：

出典

2012-04-27 20:05:37 mrtsherman

それは2014年で、背景画像のプロパティは、まだアニメートではありません。アニメーションを作成する唯一の方法は、Firefox用のjQueryフォールバックを使用することです。

出典

2014-10-26 12:34:56

Firefoxの背景画像のCSS3遷移が機能しない

答えて

関連する問題