[html]一部の要素を遅れて表示させる

HTMLの要素の一部の要素を遅らせて表示させる一番簡単な方法はあるでしょうか？

html
1<body>
2
3 <div id="first">
4   <img src="gazou1.png">
5   <p>ここは初めに<p>
6 </div>
7
8 <div id="late">
9   <img src="gazou2.png">
10   <p>ここだけ3秒後に表示させたい！！<p>
11 </div>
12
13 <div id="second">
14   <img src="gazou1.png">
15   <p>ここも初めに<p>
16 </div>
17
18</body>

真ん中のdivだけ遅れて表示させるような感じにしたいのですが、一番簡単な方法はないでしょうか？
※JS/Jqueryは使用可です

（createElementを使うことも考えましたが、さすがにコードがかっこ悪くなりそうだったので、スマートな方法を探しています。）

退会済みユーザー

2019/03/11 12:55

回答は出揃ってると思うが、いかがだろう。

行動規範の内容に同意します

回答2件

katoy様の方法ともろ被りですが…(作ってて遅くなりました…(^ ^;)

css
1#late {
2  opacity: 0;
3  animation: appeare 0s ease 3s 1 normal forwards running;
4}
5
6@keyframes appeare {
7  0% {
8    opacity: 0;
9  }
10  100% {
11    opacity: 1;
12  }
13}

jsFiddle : cssアニメーション一気に

時間設定を変更すれば徐々に出現させることも可能です。

jsFiddle : cssアニメーション徐々に

jQueryで実装する場合はこうですかね。ただまぁ、古いブラウザにも対応できるかもしれませんが、わざわざcssアニメーションを使わずこちらで実装するメリットは薄いと思います。

js
1$(window).on("load",function(){
2  $("#late").delay(3000).animate({"opacity": 1},0);
3});

jsFiddle : jQuery 一気に

こちらも時間設定により徐々に出現させることが可能です。

jsFiddle : jQuery 徐々に

見た目をいじるcssは色々ありますが、

display: none; → block; : 要素そのものが急に現れる、すなわち位置が変わるので論外。(質問者様が考えられた方法でも多分こうなります。)
visibility: hidden; → visible; : アニメーションに設定はできるが、細かい変化にはできない
opacity: 0; → 1; : いい感じで変化してくれる。img要素に適しそう。

個人的にはこんなイメージです。

投稿2018/02/17 03:19

編集2018/02/17 08:31