<div class="container">
  <div class="rotator">
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
  </div>
</div>

$duration: 3s;
$colors: #55efc4 #ffeaa7 #fd79a8;

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #2d3436;
  color: #fab1a0;
}

@keyframes rotateTriangleRotate {
  from {
    transform: rotate(0deg);
  }
  
  50%, to {
    transform: rotate(180deg);
  }
}

.rotator {
  animation: rotateTriangleRotate 2 * $duration steps(1) infinite;
}

@keyframes shrinkTriangleShrink {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.5);
  }
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 100px;
  animation: shrinkTriangleShrink $duration linear infinite;
  // &::after {
  //  content: "";
  //  position: absolute;
  //  width: 2px;
  //  height: 2px;
  //  top: 50%;
  //  left: 50%;
  //  transform: translate(-50%, -50%);
  //  background: #f00;
  // }
}

.triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: .866em;
  margin-left: -0.5em;
  margin-top: -0.5774em;
  overflow: hidden;
  transform-origin: 50% 66.666%;
  
  &::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0.707em;
    height: 0.707em;
    background: currentColor;
    transform: translate(-50%, 50%) scaleY(1.732) rotate(45deg);    
  }
  
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      animation: growTrianglesGrow-#{$i} $duration infinite; 
    }
    
    @keyframes growTrianglesGrow-#{$i} {
      from, #{$i * 10%} {
        transform: scale(0) rotate(60deg + 120deg * $i) translateY(-66.1%);
        color: nth($colors, $i);
      }
      75% {
        transform: scale(1) rotate(60deg + 120deg * $i) translateY(-66.1%);
        color: nth($colors, $i);
      }
      to {
        transform: scale(1) rotate(60deg + 120deg * $i) translateY(-66.1%);
        color: currentColor;
      }
    }   
  }
}