LoginSignup
4

More than 3 years have passed since last update.

【一番簡単に】とりあえずCSSだけで要素を〇〇秒後に表示したい

Posted at

Keyframesを使う

Keyframesを使えば簡単にできます。
Keyframesが分からなくても以下をコピペすればとりあえず動きます。

<div class="hoge-box">
    10秒後に表示されるBOX
</div>

/* 10秒後に0.5秒かけて"late-open"を実行する */
.hoge-box {
    display: none;
    animation: late-open 0.5s ease-in 10s forwards;
}

/* late-open = display: block; */
@keyframes late-open {
  to {
    display: block;
  }
}

display: none;だった要素が10秒後にdisplay: block;で上書きされることで表示されます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4