<div class="container d-flex align-items-center justify-content-center">
  <div class="app d-flex align-items-center justify-content-center">
    <div class="counter">
      
      <div>
        <div class="box">
        </div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      
      <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      
      <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      
      <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      
      <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      
    </div>
  </div>
</div>
//Colors
$black: #252a34;
$blue: #08d9d6;
$red: #ff2e63;
$white: #eaeaea;

body {
  background-color: $black;
}

.container {
  height: 100vh;
}

.app {
  background-color: $black;
  height: 50%;
  width: 60%;
  min-width: 300px;
  min-height: 300px;
  border: 5px solid $red;
}

/* CUSTOMS */

.box {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  background-color: $blue;
}

/* animation bindings */

// Row 1
.counter > div:nth-child(1) > .box:nth-child(1) {
  animation: box-1-1 10s infinite, rotate 1s linear infinite;
  transition: all 0s;
}

.counter > div:nth-child(1) > .box:nth-child(2) {
  animation: box-1-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(1) > .box:nth-child(3) {
  animation: box-1-3 10s infinite, rotate 1s linear infinite;
}

// Row 2
.counter > div:nth-child(2) > .box:nth-child(1) {
  animation: box-2-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(2) > .box:nth-child(2) {
  animation: box-2-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(2) > .box:nth-child(3) {
  animation: box-2-3 10s infinite, rotate 1s linear infinite;
}

// Row 3
.counter > div:nth-child(3) > .box:nth-child(1) {
  animation: box-3-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(3) > .box:nth-child(2) {
  animation: box-3-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(3) > .box:nth-child(3) {
  animation: box-3-3 10s infinite, rotate 1s linear infinite;
}

// Row 4
.counter > div:nth-child(4) > .box:nth-child(1) {
  animation: box-4-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(4) > .box:nth-child(2) {
  animation: box-4-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(4) > .box:nth-child(3) {
  animation: box-4-3 10s infinite, rotate 1s linear infinite;
}

// Row 5
.counter > div:nth-child(5) > .box:nth-child(1) {
  animation: box-5-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(5) > .box:nth-child(2) {
  animation: box-5-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(5) > .box:nth-child(3) {
  animation: box-5-3 10s infinite, rotate 1s linear infinite;
}

/* animations */

.rotate {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(-90deg);
  }
  
  70% {
    transform: rotateZ(0deg);
  }
}

@keyframes box-1-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-1-2 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-1-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-2-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-2-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $black;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-2-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-3-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-3-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-3-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-4-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-4-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $black;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-4-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-2 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}
View Compiled
//Nothing to see here

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.