A Pen by Nils Schönwald.

index.haml

- parts = 6
- 10.times do 
  .ring
    - parts.times do
      .part
    - parts = parts + 6

style.scss

@import "compass";
$si: 500px; //size
$ri: 10;    //rings
$pa: 6;     //number of parts in smalest ring
$ti: 3.5s;  //twistingtime

body { background: black; }

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

@for $i from 1 through $ri {

  $ra: $si / $ri * .5 * $i;
  $de: ($ti / $ri) *.5 * $i;
  $ring: $i;
  $rt: ($i / $pa) * 300s;
  
  .ring:nth-child(2n) {
    animation: ring#{1}#{$ring} $rt linear infinite;
  }
  
  @keyframes ring#{1}#{$ring} {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
  }

  .ring:nth-child(2n + 1) {
    animation: ring#{2}#{$ring} $rt linear infinite;
  }
  
  @keyframes ring#{2}#{$ring} {
    from { transform: rotate(0); }
    to   { transform: rotate(-360deg); }
  }

  
  @for $i from 1 through $pa {
  
    $an: 360deg / $pa;

    $y: sin($an * $i) * $ra;
    $x: cos($an * $i) * $ra;
    $part: $i;
    

    .ring:nth-child(#{$ring}) .part:nth-child(#{$i}) {
      position: absolute;
      top: 0;
      left: 0;
      width: $si / ($ri * 2 + 1) * .8;
      height: $si / ($ri * 2 + 1) * .2;
      margin: $si / ($ri * 2 + 1) * -.1 $si / ($ri * 2 + 1) * -.4;
      background: #f00;
      transform: translate($y,$x) rotate($an * -$i);
      animation: ring#{$ring}part#{$part} $ti $de linear infinite;
    }

    .ring:nth-child(2n).ring:nth-child(#{$ring}) .part:nth-child(#{$i}) {
      animation: ring#{2n}#{$ring}part#{$part} $ti $de linear infinite;
    }

    @keyframes ring#{$ring}part#{$part} {
      0%        { background: #ee3400; transform: translate($y,$x) rotate($an * -$i); }
      5%, 25%  { background: #03d831; transform: translate($y,$x) rotate($an * -$i - 90); }
      30%, 50%  { background: #ee3400; transform: translate($y,$x) rotate($an * -$i - 180); }
      55%, 75%  { background: #03d831; transform: translate($y,$x) rotate($an * -$i - 270); }
      80%, 100% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i - 360); }
    }

    @keyframes ring#{2n}#{$ring}part#{$part} {
      0%        { background: #ee3400; transform: translate($y,$x) rotate($an * -$i); }
      5%, 25%  { background: #03d831; transform: translate($y,$x) rotate($an * -$i + 90); }
      30%, 50%  { background: #ee3400; transform: translate($y,$x) rotate($an * -$i + 180); }
      55%, 75%  { background: #03d831; transform: translate($y,$x) rotate($an * -$i + 270); }
      80%, 100% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i + 360); }
    }
  }
  $pa: $pa + 6;
}

Twister.markdown

Twister

inspiration: http://i.imgur.com/pLRMp8k.gif

A Pen by Nils Schönwald on CodePen.

License.