CSS だけを使用して 5 秒後に要素を非表示にすることはできますか?

5 秒後に要素を自動的に非表示にする CSS

CSS を使用して、ページの読み込み後に 5 秒後に要素を非表示にすることはできますか? jQuery ソリューションは確かに実現可能ですが、CSS トランジションを使用してこれを実現することは可能ですか?

答え: はい

ただし、工夫が必要です。 CSS トランジションを「表示」などのプロパティやディメンションに適用して、真の非表示を実現することはできません。代わりに、要素のアニメーションを作成し、5 秒後にその表示を「非表示」に切り替えます。同時に、DOM フロー内のスペースの占有を防ぐために、高さと幅をゼロに設定します。

例

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div>

このアプローチでは、CSS トランジションを使用して望ましい結果が得られ、ページのフローに影響を与えることなく、指定された遅延の後に要素が非表示になります。

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