- (1..2).each do
 .wrap
  - (1..21).each do
   .box
View Compiled
$bg: #111;
$t: transparent;
$y: #ffce3b;
$o: #ff7520;
$r: #ea0014;
$lb: #00fffe;
$db: #0056a7;
$p: #51386b;
$w: #fff;
$tl: 0% 0%;
$tr: 100% 0%;
$bl: 0% 100%;
$br: 100% 100%;
$time: 4s;

body{
  background:radial-gradient(circle at top left, $y -50%, $t 50%), radial-gradient(circle at bottom right, $o -20%, $t 40%), $w;
  
  width:100%;
  height:100vh;
  .wrap{
    width:80vw;
    height:34.25vw;
    position:absolute;
    left:calc(50% - 40vw);
    top:50%;
    transform:translateY(-50%);
    z-index:0;
    &:nth-of-type(2){
      filter:blur(50px);
      animation:blur 3s ease-in-out infinite alternate;
      z-index:-1;
      @keyframes blur{
        to{
          filter:blur(25px);
        }
      }
    }
    .box{
      width:11.425vw;
      height:11.425vw;
      display:inline-block;
      float:left;
      position:relative;
      overflow:hidden;
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        // animation:none !important;
      }
      &:first-of-type, &:nth-of-type(13){
        &:before{
          background:radial-gradient(circle at bottom right, $o, $y 70%, $t 70%);
          transform-origin:$br;
          animation:rotatel $time ease-in-out infinite alternate;
          
        }
      }
      &:nth-of-type(2), &:nth-of-type(14){
        &:before{
          background:radial-gradient(circle at bottom left, $y, $o 70%, $t 70%);
          transform-origin:$bl;
          animation:rotater $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(9), &:nth-of-type(21){
        &:before{
          background:radial-gradient(circle at top left, $r, $o 70%, $t 70%);
          transform-origin:$tl;
          animation:rotater $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(15){
        &:before{
          background:radial-gradient(circle at bottom right, $y, $r 70%, $t 70%);
          transform-origin:$br;
          animation:rotater $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(16){
        &:before{
          background:$r;
          animation:slider $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(3){
        &:before{
          background:radial-gradient(circle at bottom right, $lb, $db 70%, $t 70%);
          transform-origin:$br;
          animation:rotater $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(4){
        &:before{
          background:radial-gradient(circle at bottom left, $db, $lb 70%, $t 70%);
          transform-origin:$bl;
          animation:rotatel $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(10), &:nth-of-type(20){
        &:before{
          background:radial-gradient(circle at top right, $db, $lb 70%, $t 70%);
          transform-origin:$tr;
          animation:rotatel $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(20){
        &:before{
          background:radial-gradient(circle at top right, $r, $y 70%, $t 70%);
        }
      }
      &:nth-of-type(11){
        &:before{
          background:radial-gradient(circle at top left, $lb, $p 70%, $t 70%);
          transform-origin:$tl;
          animation:rotatel $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(5){
        &:before{
          background:repeating-linear-gradient(to right, $r, $r 1px, $t 1px, $t 5px), linear-gradient(to top, $y, $w);
          transform-origin:bottom;
          animation:slide $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(12){
        &:before{
          background:repeating-linear-gradient(to right, $r, $r 1px, $t 1px, $t 5px), linear-gradient(to bottom, $y, $o);
          transform-origin:$tl;
          animation:slide $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(6){
        &:before{
          background:radial-gradient(circle at right, $y, $o 45%, $t 45%);
          transform-origin:$br;
          animation:slidel $time ease-in-out infinite alternate;
        }
      }
      &:nth-of-type(7){
        &:before{
          background:radial-gradient(circle at left, $r, $y 45%, $t 45%);
          transform-origin:$br;
          animation:slider $time ease-in-out infinite alternate;
        }
      }
      @for $i from 1 through 21{
        &:nth-of-type(#{$i}){
          &:before{
            animation-delay:#{$i/-30}s;
          }
        }
      }
    }
  }
  
}

@keyframes rotater{
  0%{
    transform:rotate(-180deg);
  }
  10%{
    transform:rotate(-180deg);
  }
  40%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(0deg);
  }
}

@keyframes rotatel{
  0%{
    transform:rotate(180deg);
  }
  10%{
    transform:rotate(180deg);
  }
  30%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(0deg);
  }
}

@keyframes slide{
  0%{
    transform:scaleY(0);
  }
  30%{
    transform:scaleY(0);
  }
  50%{
    transform:scaleY(1);
  }
  100%{
    transform:scaleY(1);
  }
}


@keyframes slider{
  0%{
    transform:translateX(-200%);
  }
  10%{
    transform:translateX(-200%);
  }
  30%{
    transform:translateX(0%);
  }
  100%{
    transform:translateX(0%);
  }
}

@keyframes slidel{
  0%{
    transform:translateX(200%);
  }
  10%{
    transform:translateX(200%);
  }
  30%{
    transform:translateX(0%);
  }
  100%{
    transform:translateX(0%);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.