<figure>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</figure>

@import "bourbon";

html, body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

body {
  @include linear-gradient(#121214, #343437);
}

figure {
  position:absolute;
  width:0;
  height:0;
  left:50%;
  top:50%;
  margin:-60px -50px;
  @include transform-style(preserve-3d);
  @include perspective(600);
  
  span {
    display:block;  
    position: absolute;
    @include transform-origin(50% 100%);
    
    &:after {  
      display:block;
      content:'';
      border-style: solid;
      border-color: transparent;
      border-width: 100px 58px 0;
      @include backface-visibility(hidden);
    }    
    
    $time : 2s;
    @for $i from 1 through 6 {
    
      &:nth-child(#{$i}) {
        @include transform(rotate3d(0, 0, 1, #{($i*60deg)+30deg}));

        &:after {
          border-top-color: adjust-hue(#ff0, $i*5); 
          @include transform(rotate3d(0.5, 1, 0, 180deg));   
          @include animation(split $time #{(0 + $i)*($time/18)} ease infinite);   
        }

      }    

    }
  
  }

}

@include keyframes(split) {
  
  0% {
    @include transform-origin(50% 100%);
    @include transform(rotate3d(0.5, 1, 0, 180deg));       
  }
  
  25% {
    @include transform-origin(50% 100%);
    @include transform(rotate3d(0, 1, 0, 360deg));       
  }
  
  50% {
    opacity:1;
    @include transform-origin(100% 0%);
    @include transform(rotate3d(0, 1, 0, 360deg));       
  }
  
  75% {
    opacity:0;
    @include transform(rotate3d(0.5, 1, 0, 180deg));       
  }
  
  100% {
    opacity:1;
    @include transform(rotate3d(0.5, 1, 0, 180deg));       
  } 
  
}