CSS トランジションまたはアニメーションは 5 秒後に要素を自動的に非表示にできますか?-CSSチュートリアル-php.cn

CSS トランジションまたはアニメーションは 5 秒後に要素を自動的に非表示にできますか?

Patricia Arquette

リリース： 2024-11-08 08:36:02

オリジナル

549 人が閲覧しました

Can CSS Transitions or Animations Auto Hide Elements After 5 Seconds?

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

ページが読み込まれてから 5 秒後に要素を非表示にすることは可能かという疑問が生じます。 ? jQuery ソリューションは知られていますが、CSS トランジションを使用してそれを複製することが目的です。それは可能ですか?それとも CSS トランジション/アニメーションの機能を超えていますか?

答え

答えは、はっきりと「はい」です。ただし、要素を非表示にするために通常使用されるプロパティのアニメーション化や遷移 (表示や寸法の変更、オーバーフロー: 非表示への設定など) は不可能であるため、期待どおりの方法で実現することはできません。

代わりに、アニメーション関連する要素に対して作成されます。 5 秒後、可視性: 非表示になります。が切り替わりますが、要素が DOM フロー内のスペースを占有するのを防ぐために、高さと幅は 0 に設定されます。

例コード

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