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 サイトの他の関連記事を参照してください。