CSSアニメーションで要素をフェードイン、フェードアウトさせる際の設定方法について

5つの■を以下のルールでバラバラに表示させ、バラバラに消えるようなアニーメーションを作ろうとしています。

各■を1秒ごとに順に表示させる
すべてが表示された2秒後、各■が1秒ごとに順に消えていく
すべてが消えた2秒後、またこの一連のアニメーションをループさせる

■■■■■（現れる順序　1・3・5・2・4）
■■■■■（消える順序　5・4・3・2・1）

この時、各■は

・表示させるタイミング
・表示されている時間
・消えるタイング
・消えている時間

がそれぞれ異なってきます。

まず、CSSで各■のopacityを0とし、keyframeで以下の２つの動きを作りました。

css
1.box {
2 opacity: 0;
3}
4
5@keyframes fadeIn {
6  0% { opacity: 0;}
7  100% { opacity: 1;}
8}
9@keyframes fadeOut {
10  0% { opacity: 1;}
11  100% { opacity: 0;}
12}

１つ目に表示させる■は、以下のようなタイムラインになるのですが、

1秒後に表示
その後、残り4つの■が表示されるまで[4秒]
5つの■が全て表示させるので[2秒]
順に■が1秒ごとに消えていく（この■は5番目に消えるので[4秒]）

＝この■が表示されるまで[1秒]、そこから消えるまでの時間は[10秒]なので、以下のように書いて希望通りの動きはできました。

css
1.box01 {
2	animation: fadeIn .1s 1s forwards, fadeOut .1s 10s forwards;
3}

ここまでは出来たのですが、次にまたこの一連のアニメーションを繰り返す際に、どのようにループさせればいいのか分かりません。
infiniteを使うことで、個々のkeyframeをループさせることは出来るのですが、fadeInとfadeOutが同時に繰り返されてしまいました。
これを交互に繰り返す方法などはあるのでしょうか？

どなかた教えていただけると幸いです。
よろしくお願いします。

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

回答1件

ベストアンサー

infinite で繰り返すなら、アニメーションサイクル(animation-duration) を10秒にして、
一つのkeyframe内でそれぞれのタイミングでフェイドイン、フェイドアウトさせるようにすることになります。

html
1<div class="wrapper">
2  <div class="box1"></div>
3  <div class="box2"></div>
4  <div class="box3"></div>
5  <div class="box4"></div>
6  <div class="box5"></div>
7</div>

css
1.wrapper {
2  display: flex;
3  gap: 10px;
4}
5.wrapper div {
6  background-color: blue;
7  width: 50px;
8  height: 50px;
9  opacity: 0;
10}
11.box1 {
12  animation: fadeInOut1 10s infinite;  
13}
14.box2 {
15  animation: fadeInOut2 10s infinite;  
16}
17.box3 {
18  animation: fadeInOut3 10s infinite;  
19}
20.box4 {
21  animation: fadeInOut4 10s infinite;  
22}
23.box5 {
24  animation: fadeInOut5 10s infinite;  
25}
26@keyframes fadeInOut1 {
27  0% {opacity: 0;}
28  10% {opacity: 1;}
29  90% {opacity: 1;}
30  100% {opacity: 0;}
31}
32@keyframes fadeInOut2 {
33  30% {opacity: 0;}
34  40% {opacity: 1;}
35  80% {opacity: 1;}
36  90% {opacity: 0;}
37}
38@keyframes fadeInOut3 {
39  10% {opacity: 0;}
40  20% {opacity: 1;}
41  70% {opacity: 1;}
42  80% {opacity: 0;}
43}
44@keyframes fadeInOut4 {
45  40% {opacity: 0;}
46  50% {opacity: 1;}
47  60% {opacity: 1;}
48  70% {opacity: 0;}
49}
50@keyframes fadeInOut5 {
51  20% {opacity: 0;}
52  30% {opacity: 1;}
53  50% {opacity: 1;}
54  60% {opacity: 0;}
55}

サンプル↓
CSS animations Sample

投稿2022/08/12 12:48

hatena19

総合スコア33699

waon

2022/08/12 12:57

ありがとうございます！なるほど、keyframe内で総時間を割ったものを％ごとに指定していくんですね。サンプルまでご用意くださってとても参考になりました。これに全て表示された際の2秒、全てが非表示になった際の2秒のブランクを加味して総時間を算出して、それを％で指定していけば良さそうですね。やってみます！