.dark-container
  .circle-wrapper
    - 24.times do |time|
      .circle
  .footer 
View Compiled
@keyframes rotationcircle
  100% 
    transform: rotate(360deg)
    
html, body 
  margin: 0
  padding: 0
  height: 300px
  .dark-container
    width: 100%
    height: 100%
    background-color: #fff
    .circle-wrapper
      width: 800px
      margin: 0 auto
      display: flex
      flex-direction: row
      flex-wrap: wrap
        
      .circle
        width: 100px
        height: 100px
        background: url('https://code.paderta.com/02_synchro/outerRing.svg') 100% 100% no-repeat
        background-size: 100px 100px
        animation: rotationcircle 5s infinite
          
        &:nth-child(3n+1)
          animation-duration: 2s
          animation-direction: reverse
        &:nth-child(3n+2)
          animation-duration: 4s
            
    .footer
      margin-top: 40px
      color: #FFF
      font-size: 1.5vmax
      text-align: center
    

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.