CodePen Embed - GRMYdGO

<div class="grid-0">
  <div class="grid-1">
    <div class="cube-1" style="--i:0; --j:0;">1</div>
    <div class="cube-2" style="--i:1; --j:0;">2</div>
    <div class="cube-3" style="--i:2; --j:0;">3</div>
    <div class="cube-4" style="--i:0; --j:1;">4</div>
    <div class="cube-5" style="--i:1; --j:1;">5</div>
    <div class="cube-6" style="--i:2; --j:1;">6</div>
    <div class="cube-7" style="--i:0; --j:2;">7</div>
  </div>
</div>

* {
  --grid-div: 10px;
  --step-size: 50px;
  --step-time: 1s;
  --step-duration: calc(var(--step-time) * 7);
  
}

.grid-0 {
  display: flex;
  justify-content: center;
  align-items: center;
  
  min-height: 100vh;
  box-sizing: border-box;
}

.grid-1 {
  position: relative;
  width: 200px;
  height: 200px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  transform: rotateZ(45deg);
  background: green;
  
}

.grid-1 div {
  position: absolute;
  
  left: calc(var(--i) * var(--grid-div) * 5);
  top:  calc(var(--j) * var(--grid-div) * 5);
  color: black;
  font-size: 3em;
  
  border-radius: 10px;
  /*border: solid 3px black;*/
  
  padding: 10px;
  margin: var(--grid-div);
  
  width: 20px;
  max-width: 20px;
  height: 20px;
  max-height: 20px;
  
  /*background: hsl(calc(40*var(--i)), 100%, calc(30% + 30%*var(--j)));*/
  background: linear-gradient(
    hsl(calc(40*var(--i)), 100%, calc(30% + 30%*var(--j))), 
    hsl(calc(40*var(--j)), 100%, calc(30% + 30%*var(--i)))
  );
}

.cube 
{
  animation: bobbingAnim 5s linear infinite;
}

.cube-5
{
  z-index: 999;
  animation: step5 var(--step-time) forwards, 
             step8 var(--step-time) calc(var(--step-duration) * 1) forwards, 
             step7 var(--step-time) calc(var(--step-duration) * 2) forwards,
             step4 var(--step-time) calc(var(--step-duration) * 3) forwards,
             step1 var(--step-time) calc(var(--step-duration) * 4) forwards,
             step2 var(--step-time) calc(var(--step-duration) * 5) forwards,
             step3 var(--step-time) calc(var(--step-duration) * 6) forwards,
             step6 var(--step-time) calc(var(--step-duration) * 7) forwards;
}

.cube-6
{
  z-index: 999;
  animation: step6 var(--step-time) var(--step-time) forwards, 
             step5 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time)) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time)) forwards,
             step7 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time)) forwards,
             step4 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time)) forwards,
             step1 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time)) forwards,
             step2 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time)) forwards,
             step3 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time)) forwards;
}

.cube-3
{
  z-index: 999;
  animation: step3 var(--step-time) calc(var(--step-time) * 2) forwards, 
             step6 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time) * 2) forwards,
             step5 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time) * 2) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time) * 2) forwards,
             step7 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time) * 2) forwards,
             step4 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time) * 2) forwards,
             step1 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time) * 2) forwards,
             step2 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time) * 2) forwards;
}

.cube-2
{
  z-index: 999;
  animation: step2 var(--step-time) calc(var(--step-time) * 3) forwards, 
             step3 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time) * 3) forwards,
             step6 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time) * 3) forwards,
             step5 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time) * 3) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time) * 3) forwards,
             step7 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time) * 3) forwards,
             step4 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time) * 3) forwards,
             step1 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time) * 3) forwards;
}

.cube-1
{
  z-index: 999;
  animation: step1 var(--step-time) calc(var(--step-time) * 4) forwards, 
             step2 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time) * 4) forwards,
             step3 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time) * 4) forwards,
             step6 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time) * 4) forwards,
             step5 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time) * 4) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time) * 4) forwards,
             step7 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time) * 4) forwards,
             step4 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time) * 4) forwards;
}

.cube-4
{
  z-index: 999;
  animation: step4 var(--step-time) calc(var(--step-time) * 5) forwards, 
             step1 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time) * 5) forwards,
             step2 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time) * 5) forwards,
             step3 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time) * 5) forwards,
             step6 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time) * 5) forwards,
             step5 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time) * 5) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time) * 5) forwards,
             step7 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time) * 5) forwards;
}

.cube-7
{
  z-index: 999;
  animation: step7 var(--step-time) calc(var(--step-time) * 6) forwards, 
             step4 var(--step-time) calc(var(--step-duration) * 1 + var(--step-time) * 6) forwards,
             step1 var(--step-time) calc(var(--step-duration) * 2 + var(--step-time) * 6) forwards,
             step2 var(--step-time) calc(var(--step-duration) * 3 + var(--step-time) * 6) forwards,
             step3 var(--step-time) calc(var(--step-duration) * 4 + var(--step-time) * 6) forwards,
             step6 var(--step-time) calc(var(--step-duration) * 5 + var(--step-time) * 6) forwards,
             step5 var(--step-time) calc(var(--step-duration) * 6 + var(--step-time) * 6) forwards,
             step8 var(--step-time) calc(var(--step-duration) * 7 + var(--step-time) * 6) forwards;
}


@keyframes step6 {
   from {
       transform: translate3d(
         calc((2 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         1px);
   }

   to {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step5 {
   from {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((2 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step8 {
   from {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((2 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((2 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step7 {
   from {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((2 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step4 {
   from {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step1 {
   from {
       transform: translate3d(
         calc((0 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step2 {
   from {
       transform: translate3d(
         calc((1 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((2 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }
}

@keyframes step3 {
   from {
       transform: translate3d(
         calc((2 - var(--i)) * var(--step-size)), 
         calc((0 - var(--j)) * var(--step-size)), 
         0px);
   }

   to {
       transform: translate3d(
         calc((2 - var(--i)) * var(--step-size)), 
         calc((1 - var(--j)) * var(--step-size)), 
         0px);
   }
}

This Pen is owned by iamkisly on CodePen.

See more by @iamkisly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.