CSS でフェードアウト効果を作成しようとすると、スライド アニメーションが機能しないのはなぜですか?

CSS3 トランジション: フェードアウト効果

純粋な CSS を使用してフェードアウト効果を実装しようとすると、なぜスライド アニメーションを使用するのか混乱する可能性があります。機能しないでしょう。その理由は次のとおりです。

フェードアウト効果の鍵は、不透明度プロパティの遷移にあります。スライド アニメーションに使用される一番上のプロパティでは、望ましい効果が得られません。

CSS3 トランジションを使用したフェードアウト効果

これを実現する方法の例を次に示します。 CSS3 トランジションを使用したフェードアウト効果:

<code class="css">.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}</code>

このクラスが要素に適用されると、2 秒間かけて徐々にフェードアウトします。

追加リソース:

• [CSS3 トランジション: フェードインとフェードアウトのような効果](https://css-tricks.com/css3-transition-fadein-fadeout/)

違いを理解する:

フェードアウト アニメーションとスライド アニメーションの主な違いは、遷移されるプロパティにあります。フェードアウト効果の場合は不透明度プロパティですが、スライド アニメーションの場合は通常、上または左などの位置プロパティです。

提供されたコードの場合、アニメーションは上プロパティを変換するように設定されています。これにより、要素がフェードアウトするのではなく、画面の外に移動します。

以上がCSS でフェードアウト効果を作成しようとすると、スライド アニメーションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。