0

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>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49

2 Answers2

1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Animation thing is perfect, visually it creates the same illusion, but there's one issue with this approach. my colors are random plus they have a gradient on each box, also background is gradient. so I doubt this would work for me. I added colors on Fiddle to represent different boxes. It leaves a white div on a darker body background color – Deepak Yadav Apr 01 '20 at 14:01
  • @DeepakYadav so you don't really want a fading effect? an immediat hiding is fine? – Temani Afif Apr 01 '20 at 14:17
  • @DeepakYadav here is an update with a background gradient for body and mix-blend-mode on both wrapper and boxes to blend through each levels – G-Cyrillus Apr 01 '20 at 15:10
  • 2
    your edit will not work on Chrome due to background-propagation. You need to move the background to body (and have another one on html) or use a cascading mix-blend-mode (body and html). Related: https://stackoverflow.com/a/60351855/8620333 – Temani Afif Apr 01 '20 at 15:23