A Pen by Fabrice Weinberg.

index.haml

.dots
  -(1..16).each do |i|
    .dot

style.scss

@import "compass";
$dot-colors : (#7F00FF, #DF00FF, #FF00BF, #FC1262, #FC0D1B, #FC6120, #FDBE2C, #DFFD35, #84FD31, #35FD2F, #2AFD4E, #2BFDA2, #2DFFFE, #1BA2FC, #0E49FB, #2324FB);

$tau : 2*pi();

$circelPart : $tau / 15;
$singleDuration : .5s;
$delayForEach : $singleDuration / 2.5; // random(8) Change 2.5 to see fun things 
$expandBy : 4; 

@for $i from 1 through 16 {
  $x-cordInner : cos($i * $circelPart ) * 1.5;
  $y-cordInner : sin($i * $circelPart ) * 1.5;
  .dot:nth-child(#{$i}){ 
    background-color: nth($dot-colors, $i);
    transform: translate(#{$x-cordInner}em, #{$y-cordInner}em);
    animation: dot#{$i} $singleDuration ease alternate infinite -#{$delayForEach*($i - 1)};
  }
  
  
  $x-cordOuter : cos($i * $circelPart ) * (1.5 +$expandBy);
  $y-cordOuter : sin($i * $circelPart ) * (1.5 +$expandBy);
  
  @keyframes dot#{$i}{
    to{
      transform: translate(#{$x-cordOuter}em, #{$y-cordOuter}em);
    }
  }
}
body{
  background: black;
}

.dots{
  display:block;
  width:2em;
  margin:10em auto;  
}

.dot{
  display:block;
  position:absolute;
  
  width:.5em;
  height:.5em;
  
  border-radius:50%;
}

There-is-no-rotational-movement-in-this..markdown

There is no rotational movement in this.

Solved using SCSS.

Thanks @Mobilpadde for finding this!

Reddit: http://www.reddit.com/r/woahdude/comments/1l2zbs/there_is_no_rotational_movement_in_this/

This GIF: http://24.media.tumblr.com/1c104e822d2fcd69ffdc371907b39ff0/tumblr_mrsjwox3jJ1r2geqjo1_500.gif

A Pen by Fabrice Weinberg on CodePen.

License.