Firefox と Internet Explorer はなぜ背景画像をアニメーション化しないのですか?

背景画像のアニメーション: ブラウザ間の互換性

Web アニメーションでは、トランジションまたはキーフレーム中に背景画像を変更するのが一般的です。ただし、背景画像アニメーションが Firefox または Internet Explorer で機能しないとユーザーから報告されています。

Firefox と Internet Explorer が背景画像アニメーションを表示できない理由

CSS 標準で指定されているように、background-image はアニメーション化可能なプロパティとみなされません。 Firefox と Internet Explorer はこの仕様に準拠しているため、アニメーションが失われます。

Chrome の動作

仕様にもかかわらず、Chrome は背景画像のアニメーションを表示します。これは、背景画像が (不透明度と位置内で) 暗黙的にアニメーション化可能であるという Chrome の解釈によるものです。

Firefox のトランジションの奇妙な処理

Firefox はトランジションとアニメーションの間で一貫性のない動作をします。 。遷移時に背景画像が表示されますが、アニメーションは完全にスキップされます。

解決策: 代替プロパティの使用

ブラウザ間の互換性を確保するには、background- の使用を避けてください。キーフレーム内の画像。代わりに、次の引用で示唆されているように、background-position または opacity を使用します:

「グラデーションをアニメーション化するには、同じタイプである必要があります。」

コード スニペット:

提供されたコード スニペットでは、最初の div は背景画像の遷移 (すべてのブラウザーで機能します) を示し、2 番目の div は背景画像をアニメーション化しようとします (Firefox または Internet Explorer では機能しません)。

以上がFirefox と Internet Explorer はなぜ背景画像をアニメーション化しないのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。