【CSS】【１枚ずつ表示編】アニメーションで画像や文字を遅延表示（遅れて表示）させる方法｜CSS animation

CSS(シー・エス・エス)

2021.08.052022.03.03

前回、CSSのアニメーションを使って「画像や文字を遅延表示（遅れて表示）」させる方法を書きましたが、今回はさらにパワーアップして「１枚ずつ順番に」画像や要素を表示させる方法に挑戦をしてみたいと思います。

CSS animation（復習）
それぞれのdivにクラス名を追加する
最初は「非表示」の状態にしておく必要がある
opacity: 0; を追加する
0%{opacity: 0;}を消す？
アニメーション終了時の状態を維持する（animation-fill-mode）
まとめ

CSS animation（復習）

もう復習か・・・という感じもしますが、復習は、早い内に。

.columns {
animation: fadeInBox 4s linear;
}

@keyframes fadeInBox{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

これだけで、要素がふわっと浮き出るようになりました。

サンプルページはこちら

https://css.eguweb.tech/p020/

jQueryやJavaScriptなどは使っておらず、CSSのアニメーションでopacity: 0;からopacity: 1;に変化させるだけで、ふわっと浮き出るような表示になるので、簡単ですね！

それぞれのdivにクラス名を追加する

ひとまず、各カラムボックスの中に連番のクラス名を付加して、ひとつずつ追加してみます。

各クラスにアニメーションディレイ（animation-delay）を設定、１秒ずつずらして表示されるようにしてみます。

■animation-delay

animation-delay - CSS: カスケーディングスタイルシート | MDN

animation-delay は CSS のプロパティで、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

.appear01 {animation-delay: 1s;}
.appear02 {animation-delay: 2s;}
.appear03 {animation-delay: 3s;}
.appear04 {animation-delay: 4s;}
.appear05 {animation-delay: 5s;}
.appear06 {animation-delay: 6s;}
.appear07 {animation-delay: 7s;}
.appear08 {animation-delay: 8s;}

これで、次々に表示されるはず・・・！

なんだか、ちょっと思っていなかった結果になってしまいました・・・。
＿|￣|○

最初は「非表示」の状態にしておく必要がある

このアニメーションの設定だと、最初の0%{opacity: 0;}が１秒後、２秒後・・・と始まるので、非表示になる「開始時間」がずれてしまうことになるようです。

.columns {
animation: fadeInBox 4s linear;
}

@keyframes fadeInBox{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

なるほど。

ということは「最初は非表示にしておいて、次々に表示させる」という方法を使えばいい・・・ということ？になるようにな気がします。

opacity: 0; を追加する

であれば、opacity: 0;を最初から追加しておけばいいのでは？ということで、追加してみました。

.columns {
background-color: #eee;
box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.4);
margin: 10px;
transition: box-shadow 0.1s ease-out;
animation: fadeInBox 4s linear;
width: 300px;
height: 300px;
opacity: 0;
}

いい感じに・・・

・・・と、思ったら、大変なことになってしまいました・・・。
＿|￣|○

よく考えたらそうなのですが、もともとopacity: 0; なので、アニメーションが終わったタイミングで、画面から消えることになります・・・。

0%{opacity: 0;}を消す？

であれば、0％の状態が無ければ、そのまま（表示された）状態になるのでは？

@keyframes fadeInBox {
0% {opacity: 0;}
100% {opacity: 1;}
}

0% {opacity: 0;}を削除。

@keyframes fadeInBox {
100% {opacity: 1;}
}

ダメでした。
＿|￣|○

アニメーション終了時の状態を維持する（animation-fill-mode）

どうやら「animation-fill-mode」という便利な方法があるようです。こちらの「forwards」という値を使うと、キーフレームの最後の値を保持することができるようです。なるほど。

forwards
対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは animation-direction と animation-iteration-count の値によって変わります。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

animation-fill-mode: forwards;を追加します。

.columns {
background-color: #eee;
box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.4);
margin: 10px;
transition: box-shadow 0.1s ease-out;
animation: fadeInBox 4s linear;
width: 300px;
height: 300px;
opacity: 0;
animation-fill-mode: forwards;
}