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

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

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

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

この時、各■は

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

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

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

css

.box { opacity: 0;} @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;}}@keyframes fadeOut { 0% { opacity: 1;} 100% { opacity: 0;}}

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

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

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

css

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

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

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