純粋な CSS トランジションを使用して遅延後に要素を非表示にすることはできますか?

遅延後に CSS で要素を非表示にする

この質問では、jQuery ソリューションの必要性を排除して、要素を 5 秒間非表示にすることが可能かどうかを検討します。純粋に CSS トランジションを使用してページをロードした後。

革新的なアプローチ

CSS アニメーションとトランジションは通常、寸法や表示設定などのプロパティの変更を中心に展開するため、標準的な非表示方法は要素 (例: 表示を非表示に設定する) はここでは適用できません。

したがって、カスタム アニメーション シーケンスがこの課題を解決します。 5 秒後に高さと幅をゼロにアニメーション化すると、要素はレイアウト内のスペースを占有せずにビューから効果的に消えます。同時に、可視性を非表示に設定すると、ユーザーがそれを認識できないようになります。

実装と例

次のコードは、このソリューションの実装方法を示しています。

CSS:

HTML:

Fiddle:

を参照JSFiddle で実行中のソリューション: [フィドルへのリンク]

以上が純粋な CSS トランジションを使用して遅延後に要素を非表示にすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。