<div class="css-triangle-1">
  
</div>
<div class="css-triangle-2">
  
</div>

<div class="css-triangle-3">
  
</div>

body { 
  background: #0f0e17;
  position: relative
}
.css-triangle-1 {
  width: 0; 
  position: absolute;
  height: 0; 
  right: 50%;
  border-top: 30px solid transparent;
  border-bottom: 50px solid #e53170; 
  border-right:30px solid transparent; 
  border-left: 30px solid transparent;

  animation: HoldUp 8s ease-in-out infinite;
  animation-direction: alternate;
}

.css-triangle-2 {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 60px solid #e53170; 
  border-right:40px solid transparent; 
  border-left: 40px solid transparent;

  animation: HoldUp 10s ease-in-out infinite;
  animation-direction: alternate-reverse;

}

.css-triangle-3 {
  width: 0; 
  height: 0; 
  position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 60px solid #e53170; 
  border-right:40px solid transparent; 
  border-left: 40px solid transparent;
  right: 25%;

  animation: HoldUp2 6s ease-in-out infinite;
  animation-direction: alternate-reverse;
}

@keyframes HoldUp {
  0% {
    transform: translateX(0) rotate3D(1, 1, 1, 20deg) translate3D(0, 0, -100px);
    filter: blur(1px) grayscale(0%);
  }
  100% {
    transform: translateX(50px) rotate3D(1, 1, 1, 56deg) translate3D(0, 0, -40px) scale(0.8);
    filter: blur(4px) grayscale(20%);
    
  }
}


@keyframes HoldUp2 {
  0% {
    transform: translateX(0) rotate3D(1, 1, 1, 10deg) translate3D(0, 0, -80px);
    filter: blur(1px) grayscale(0%);
  }
  100% {
    transform: translateX(70px) rotate3D(2, 1, 2, 50deg) translate3D(0, 0, -40px) scale(0.8);
    filter: blur(2px) grayscale(20%);
    
  }
}