CSS3 で背景画像のフェードイン/フェードアウト トランジションを作成するにはどうすればよいですか?

CSS3 での画像フェード効果トランジション

CSS トランジションを使用して要素に対して「フェードイン フェードアウト」効果を実装することは可能ですが、背景画像についてはどうすればよいでしょうか?

ある読者は最近、次のような背景を使用してこれを達成するのに苦労しました。 CSS:

.title a {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

問題は、background プロパティをテキストなどの要素に対してアニメーション化できないことでした。

解決策は、この更新版に見られるように、background-image プロパティを個別に移行することにあります。 CSS:

.title a {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

これにより、画像のフェードトランジションが可能になります。現在、Chrome、Opera、Safari はこの移行をネイティブにサポートしていることに注意してください。 Firefox と Internet Explorer では使用できない場合があります。

以上がCSS3 で背景画像のフェードイン/フェードアウト トランジションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。