ホームページ > 記事 > ウェブフロントエンド > CSS でフェードアウト効果を作成しようとすると、スライド アニメーションが機能しないのはなぜですか?
CSS3 トランジション: フェードアウト効果
純粋な CSS を使用してフェードアウト効果を実装しようとすると、なぜスライド アニメーションを使用するのか混乱する可能性があります。機能しないでしょう。その理由は次のとおりです。
フェードアウト効果の鍵は、不透明度プロパティの遷移にあります。スライド アニメーションに使用される一番上のプロパティでは、望ましい効果が得られません。
CSS3 トランジションを使用したフェードアウト効果
これを実現する方法の例を次に示します。 CSS3 トランジションを使用したフェードアウト効果:
<code class="css">.hidden { visibility: hidden; opacity: 0; transition: opacity 2s linear; }</code>
このクラスが要素に適用されると、2 秒間かけて徐々にフェードアウトします。
追加リソース:
違いを理解する:
フェードアウト アニメーションとスライド アニメーションの主な違いは、遷移されるプロパティにあります。フェードアウト効果の場合は不透明度プロパティですが、スライド アニメーションの場合は通常、上または左などの位置プロパティです。
提供されたコードの場合、アニメーションは上プロパティを変換するように設定されています。これにより、要素がフェードアウトするのではなく、画面の外に移動します。
以上がCSS でフェードアウト効果を作成しようとすると、スライド アニメーションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。