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

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

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

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

次の例は、 CSS3 トランジションを使用したフェードアウト効果:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

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

追加リソース:

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

違いを理解する:

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

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