// Animations
@keyframes layer1 {
  0%  { opacity: 0; }
  10% { opacity: 1; }
  20%, 50% {
    opacity: 1;
    transform: translateX(0);
  }
  70% {
    opacity: 0;
    transform: translateX(322px);
  }
}

@keyframes layer2 {
  0% { width: 0; }
  20%, 65% { width: 322px; }
  90% { width: 0; }
}

@keyframes layer3 {
  0%, 5%, 20% {
    width: 0;
    transform:
      skew(-21deg)
      translateX(50px);
  }
  40%, 58% {
    transform:
      skew(-21deg)
      translateX(0);
    width: 322px;
  }
  80% {
    width: 0;
  }
}

@keyframes layer4 {
  0%, 10% { width: 0; }
  30%, 45% { width: 296px; }
  65% { width: 0; }
}

@keyframes layer5 {
  0%, 12% { height: 0; }
  30%, 54% { height: 75px; }
  70% { height: 0; }
}

@keyframes layer6 {
  0%  { opacity: 0; }
  10% { opacity: 1; }
  20%, 50% {
    opacity: 1;
    transform: translateX(0);
  }
  70% {
    opacity: 0;
    transform: translateX(-322px);
  }
}

// Variables
$pink: #de217b;
$blue: #2194de;
$duration: 5s;

// Layer Styles
.layer {
  position: absolute;
  background: $pink;
  top: 0;
  
  transform: skew(-21deg);
  
  &:nth-of-type(3),
  &:nth-of-type(5) {
    background: $blue;
  }
  
  &:nth-of-type(1),
  &:nth-of-type(6) {
    width: 20px;
    height: 1px;
    opacity: 0;
  }
  &:nth-of-type(1) {
    left: 11px;
    transform: translateX(322px);
    animation: layer1 $duration infinite cubic-bezier(0.845, 0, 0.855, .3);
  }
  &:nth-of-type(2) {
    width: 0;
    height: 2px;
    top: 3px;
    left: 10px;
    animation: layer2 $duration infinite cubic-bezier(.31, .1, 0.1, .98);
  }
  &:nth-of-type(3) {
    width: 0;
    height: 48px;
    top: 6px;
    left: 0;
    animation: layer3 $duration infinite cubic-bezier(0.19, 1, 0.22, 1);
  }
  &:nth-of-type(4) {
    width: 0;
    height: 22px;
    top: 56px;
    right: 0;
    animation: layer4 $duration infinite cubic-bezier(0.25, 0.03, 0.79, 0);
  }
  &:nth-of-type(5) {
    width: 22px;
    height: 0;
    top: 3px;
    left: 334px;
    transform-origin: top right;
    animation: layer5 $duration infinite cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  &:nth-of-type(6) {
    top: auto;
    bottom: 0; right: 5px;
    transform: translateX(-322px);
    animation: layer6 $duration infinite cubic-bezier(0.845, 0, 0.855, .3);
  }
}

.container {
  width: 372px;
  height: 80px;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}

body { background: black; }