Прямая и обратная анимация нескольких DIV в последовательности, используя CSS - PullRequest
Новая
       91

Прямая и обратная анимация нескольких DIV в последовательности, используя CSS

0 голосов
/ 31 марта 2020

Итак, у меня есть набор ящиков, расположенных вокруг друг друга. Но используя 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>

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

Вот еще одна идея, с режимом смешивания и анимации в 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>
1 голос
/ 31 марта 2020

Вот идея использования маски, когда вам не нужно применять отдельную анимацию к каждому элементу. Вы просто анимируете градиент справа налево, чтобы показать скрытие ваших элементов: 

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