<div class="main">
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
  <div class="tri"></div>
</div>

@import "compass/css3";

body{ background: #39767c; }

$paleta: rgba(127,206,213,0.1)
         rgba(127,206,213,0.2)
         rgba(127,206,213,0.3)
         rgba(127,206,213,0.4)
         rgba(127,206,213,0.5)
         rgba(127,206,213,0.6)
         rgba(127,206,213,0.7)
         rgba(127,206,213,0.8)
         rgba(127,206,213,0.9)
         rgba(127,206,213,1);

.main {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;   
  width: 780px;
  height: 780px;
  overflow:hidden; 
}

.tri {
  float: left;
  border-style:solid;
  border-width:30px;
  width:0;
  height:0;
}

@for $i from 0 to 201{
  .main .tri:nth-child(#{$i}){
    border-color: nth($paleta, random(9)+1)
                  nth($paleta, random(9)+1)
                  nth($paleta, random(9)+1)
                  nth($paleta, random(9)+1);
    -webkit-animation: colors 2s infinite ease;
    -webkit-animation-delay: 2s; 
  }
}

@-webkit-keyframes colors {
  from {border-color: nth($paleta, random(7)+1)
                      nth($paleta, random(6)+1)
                      nth($paleta, random(8)+1)
                      nth($paleta, random(2)+1);}
  
    to {border-color: nth($paleta, random(9)+1)
                      nth($paleta, random(3)+1)
                      nth($paleta, random(6)+1)
                      nth($paleta, random(9)+1);}
}