Forward and Reverse animating multiple DIVs in sequence using CSS - css

Question

So, I have a set of boxes placed around each other. But using CSS animations I want to hide all the boxes One by One at a time, when the last box is hidden, I want to show back all the boxes but in reverse order, where last box appears first and then 9th, 8th and till 1st box appears back. And then again this animation repeats.
* {
box-sizing: border-box;
position: relative;
}
body {
background: #fcc;
}
#keyframes blink {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
animation: blink 10s alternate linear infinite;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
top: 40px;
}
.box-1 {
animation-duration: 9s;
animation-delay: 1s
}
.box-2 {
animation-duration: 8s;
animation-delay: 2s
}
.box-3 {
animation-duration: 7s;
animation-delay: 3s
}
.box-4 {
animation-duration: 6s;
animation-delay: 4s
}
.box-5 {
animation-duration: 5s;
animation-delay: 5s
}
.box-6 {
animation-duration: 4s;
animation-delay: 6s
}
.box-7 {
animation-duration: 3s;
animation-delay: 7s
}
.box-8 {
animation-duration: 2s;
animation-delay: 8s
}
.box-9 {
animation-duration: 1s;
animation-delay: 9s
}
<div class="wrapper">
<div class="boxes box-1">1</div>
<div class="boxes box-2">2</div>
<div class="boxes box-3">3</div>
<div class="boxes box-4">4</div>
<div class="boxes box-5">5</div>
<div class="boxes box-6">6</div>
<div class="boxes box-7">7</div>
<div class="boxes box-8">8</div>
<div class="boxes box-9">9</div>
<div>

Answer 1

Here is another idea, with mix-blend-mode and animation in 11 steps .
* {
box-sizing: border-box;
margin:0;
}
html,body {
background: linear-gradient( to bottom left, purple, green, yellow) pink;
min-height: 100vh
}
.wrapper {
display: flex;
position: relative;
background: linear-gradient(to right, black, black) no-repeat;
background-size: 0% 100%;
animation: blink 10s infinite alternate steps(11, end);
mix-blend-mode: lighten;
}
.boxes {
flex-grow: 1;
;
height: 50px;
background: tomato;
border: 1px solid #ccc;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
mix-blend-mode: overlay;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes blink {
100% {
background-size: 110% 100%;
;
}
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>

Answer 2

Here is an idea using mask where you don't need to apply an individual animation to each element. You simply animate a gradient from right to left to show hide your elements:
.wrapper {
display:flex;
padding-right:10%;
margin-right:-10%;
-webkit-mask:linear-gradient(to right,transparent 50%,#fff 0) right/200% 100%;
mask:linear-gradient(to right,transparent 50%,#fff 0) right/200% 100%;
animation:hide 3s steps(11) infinite alternate;
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
box-sizing:border-box;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes hide {
100% {
-webkit-mask-position:left;
mask-position:left;
}
}
body {
background:grey;
overflow:hidden;
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>
And with a fading animation:
.wrapper {
display:flex;
-webkit-mask:linear-gradient(to right,transparent 33%,#fff 66%) right/300% 100%;
mask:linear-gradient(to right,transparent 33%,#fff 66%) right/300% 100%;
animation:hide 3s linear infinite alternate;
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
box-sizing:border-box;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes hide {
100% {
-webkit-mask-position:left;
mask-position:left;
}
}
body {
background:grey;
overflow:hidden;
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>