使用CSS按顺序对多个DIVs进行正向和反向动画制作

Question

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

​

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

这里有一个使用遮罩的想法，你不需要对每个元素应用单独的动画。您只需从右到左设置渐变动画，以显示隐藏元素：

​

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

​

并带有淡入淡出的动画：

​

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

​

Answer 2

这里是另一个想法，混合-混合模式和动画在11个步骤。

​

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

​