A Pen by Brandon Brule.

index.haml

- for i in 0...200 do
  %div

Interesting-colour-square.markdown

Interesting colour square

Delayed timer for each rotating element.

A Pen by Brandon Brule on CodePen.

License.

style.scss

@import "compass";
body{ 
  padding: 0; 
  margin:5% auto;
  width:30em;
  background:#dbd8c7;
  position:relative;
  
}

div{
  width:4em;
  height:4em;
  margin-left:-2em;
  margin-top:-2em;
  float:left;
 }

/* Colors and push to right */
/* Multiple $i x 0.1 */
$colors: #8f44ad, #21a08f, #e54d42,#f1aa2a,#2d7eb6,#34495e,#ffffff;



$n : 200;
div{
  @for $i from 1 through $n {
    &:nth-child(#{$i}) {
      background: nth($colors, $i%7+1);
      
      animation-name: animation;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-delay: $i*0.01s;
      
      -webkit-animation-name: animation;
      -webkit-animation-duration: 1s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: $i*0.01s;
      
      -moz-animation-name: animation;
      -moz-animation-duration: 1s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -moz-animation-delay: $i*0.01s;
    }
  }
}

@keyframes animation {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(90deg); }
}

@-webkit-keyframes animation {
  0%   { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(90deg); }
}

@-moz-keyframes animation {
  0%   { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(90deg); }
}