CSS トランジションを使用して遅延後に要素を自動的に非表示にするにはどうすればよいですか?

CSS トランジション: 遅延後に要素を自動的に非表示にする

特定の時間間隔後に Web ページ上の要素を非表示にすることは、さまざまな方法で実現できます。 jQuery は単純なソリューションを提供しますが、CSS トランジションは同じ結果を達成するための革新的な代替手段を提供します。

アプローチ:

次のようなプロパティを直接アニメーション化する場合の CSS トランジションの制限にもかかわらず、表示では、アニメーションを利用して要素の可視性を操作することで要素の非表示をシミュレートできます。

実装:

1. 必要な期間の CSS アニメーションを作成します (5この場合は秒) @keyframes を使用します。
2. アニメーション内で、要素の高さと幅をゼロに設定して要素を非表示にします。
3. animation-fill-mode: forwards; を使用します。アニメーションの終了後も要素が非表示のままになるようにします。
4. アニメーションの遅延 (5 秒) 後、visibility:hidden; を切り替えます。要素をビューから完全に削除します。

フィドル:

次のフィドルは CSS 実装を示します:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

<div>

この手法は、指定された時間間隔の後に要素を効果的に非表示にし、要素がページ上の表示スペースを占めるのを防ぎます。

以上がCSS トランジションを使用して遅延後に要素を自動的に非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。