Help us understand the problem. What is going on with this article?

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

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;で上書きされることで表示されます。

86_nagatomo
Tomoyasu Nagatake | Web/UI/UX Designer/HTML/CSS(Sass)/Vue.js
macloud
M&Aクラウドは「テクノロジーの力で、M&Aに流通革命を」をミッションにM&Aプラットフォーム「M&Aクラウド」を開発運営するスタートアップです。
https://macloud.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away