1

.spinner > div {
  width: 1em;
  height: 1em;
  background-color: #c0c0c0;
  border-radius: 10%;
  display: inline-block;
  animation: delay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  animation-delay: -0.16s;
}
@keyframes delay {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
<div class='spinner'>
  <div class='bounce1'></div>
  <div class='bounce2'></div>
  <div class='bounce3'></div>
</div>

2 ответа 2

1

Да можно и вообще без :before и :after

.spinner{
  width: 1em;
  height: 1em;
  background-color: transparent;
  border-radius: 10%;
  display: inline-block;
  left: -1em;
position:relative;
  animation: delay 1.4s infinite ease-in-out both;
}
 
@keyframes delay {
  0% { 
   box-shadow:  1em 0 #c0c0c0,
                3em 0 #c0c0c0,
                5em 0 #c0c0c0
  }
  20% { 
   box-shadow:  1em 0 0 -.5em #c0c0c0,
                3em 0 #c0c0c0,
                5em 0 #c0c0c0
  }
  40% { 
   box-shadow:  1em 0 #c0c0c0,
                3em  0 0 -.5em #c0c0c0, 
                5em 0 #c0c0c0
  }
  60% { 
   box-shadow:  1em 0 #c0c0c0,
                3em 0 #c0c0c0,
                5em  0 0 -.5em #c0c0c0
  }
  80%, 100% { 
   box-shadow:  1em 0 #c0c0c0,
                3em 0 #c0c0c0,
                5em 0 #c0c0c0
  }

}
<div class='spinner'>
</div>

0

Такой анимации, с последовательным анимированием каждого квадрата, не получится добиться только при помощи одного div'а и псевдоэлементов, т.к. в этом случае при анимации div'а будут анимироваться и его псевдоэлементы, так же и у них будет еще раз задана анимация, соответсвенно должного эффекта добиться не получится.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.