Как сделать поочередную смену background блоков на css?

Question

[lexstile]

Есть такая структура:

<div class="preloader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Как можно организовать поочередную смену бэграунда каждого блока с классом circle? (При этом зациклив ее)

Comments

[Rustam Bainazarov]

Плюс сделал универсальные размеры.

Answer 1

[0xD34F]

<div class="preloader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.circle {
  background: grey;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: preloader 1s infinite linear;
}

.circle:nth-child(1) { animation-delay: 0s; }
.circle:nth-child(2) { animation-delay: 0.2s; }
.circle:nth-child(3) { animation-delay: 0.4s; }

@keyframes preloader {
  0%, 40% {
    background: grey;
  }
  20% {
    background: black;
  }
}