A Pen by duykhoa.

GJviA.markdown

GJviA

A Pen by duykhoa on CodePen.

License.

index.haml

.dark-container
  .circle-wrapper
    - 25.times do |time|
      .circle

style.sass

@-webkit-keyframes rotationcircle1
  0
    transform: rotate(0)
  50% 
    transform: rotate(180deg)
  100% 
    transform: rotate(360deg)
    
@-webkit-keyframes rotationcircle2
  0
    transform: rotate(0)
  50% 
    transform: rotate(-180deg)
  100% 
    transform: rotate(-360deg)
html, body 
  margin: 0
  padding: 0
  height: 100%
  .dark-container
    width: 100%
    height: 100%
    background-color: #262829
    .circle-wrapper
      width: 500px
      margin: 0 auto
      display: flex
      flex-direction: row
      flex-wrap: wrap
        
      .circle
        width: 100px
        height: 100px
        background: url('http://hack.lenotta.com/wp-content/uploads/2014/07/outerRing.svg') 100% 100% no-repeat
        background-size: 100px 100px
        -webkit-delay: 0

        &:nth-child(3n)
          -webkit-animation: rotationcircle1 5s infinite
        &:nth-child(3n+1)
          -webkit-animation: rotationcircle2 2s infinite
        &:nth-child(3n+2)
          -webkit-animation: rotationcircle1 4s infinite