使用CSS依次对多个DIV进行前向和反向动画

Question

所以，我有一组彼此围绕的盒子。但是我想使用CSS动画一次隐藏所有框，当最后一个框被隐藏时，我想以相反的顺序显示所有框，其中最后一个框首先出现，然后是第9、8和直到第一个框再次出现。然后再次重复此动画。

* {
  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

[这是另一个想法，混合混合模式和动画分11个步骤。

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex; 
  background: linear-gradient(to right, white, white) no-repeat;/* to it can be resized */
  background-size: 0% 100%;/* make it no width, so boxes do not blend yet with it */
  animation: blink 10s infinite alternate steps(11, end);/* 11 steps to grow 110% width of white bg */
}

.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;/* blending into white background */
}

.boxes:nth-child(odd) {
  background: orange;
}

@keyframes blink {
  100% {
    background-size: 110% 100%;/* 110% makes 11 steps of 10% */
  }
}

<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

这里是使用蒙版的想法，您无需将单独的动画应用于每个元素。您只需从右到左设置一个渐变动画即可显示隐藏的元素：

.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>