5

私の背景画像の遷移はChromeでは正常に機能していますが、Firefoxでは何もしません。CSS3トランジションは初めてです。調査しましたが、私の構文は正しいようです。私が読んだことから、FFはこれをサポートするはずです。私はFF12.0を使用しています。このCSS3トランジションがFirefoxで機能しないのはなぜですか。

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

2 に答える 2

11

MDNドキュメントで答えが見つかりました。

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

背景画像

これはまだ少し空中で、現在の作業ドラフトには「グラデーションのみ」、現在の編集者ドラフトには背景画像がまったくなく、CSSの背景と境界線モジュールレベルの背景画像には「アニメーション化可能：いいえ」があります。 3編集者のドラフト。ただし、Chrome 19 Canaryでサポートが提供されており、これはデザイナーが望んでいることです。広範なサポートが到着するまで、これは画像のスプライトと背景の位置または不透明度を介して偽造される可能性があります。

現時点では、実際にグラデーションをサポートしている人はいないことがわかりました（Chrome 17、FF 12、IE9）。Chromeのみがbackground-imageをサポートしています（そのため、FFでは機能しません）。

于 2012-04-27T20:05:37.797 に答える
1

2014年であり、background-imageプロパティはまだアニメートできません：http： //dev.w3.org/csswg/css-backgrounds/#background-image

Webkitでは正常に動作しますが、Firefoxでは動作しません。アニメーションを作成する唯一の方法は、FirefoxにjQueryフォールバックを使用することだと思われます。

于 2014-10-26T12:34:56.877 に答える