A Lonely Square

index.jade

.container
  .square
  .trees
    - var trees = 7
    while trees--
      .tree
        .branch
          .branch
            .branch
              .branch
               .leaves
                 .leaves
                   .leaves

style.less

.container {
  background-color: white;
  height: 600px;
  width: 600px;
  position: relative;
}

@rowCount: 9;
@colCount: 9;

.row {
  width: 33.33%;
  height: 33.33%;
  
}

.square {
  width: 33.33%;
  height: 33.33%;
  left: 33.33%;
  top: 33.33%;
  position: absolute;
  background-color: black;
}

@max: 10;
@startHeight: 22px;
@startWidth: 2px;

.tree {
    position: absolute;
    left: 33.33%;
    top: 33.33%%;
  
  div {
        -webkit-box-reflect: right;
    position: absolute;
    bottom: 75%;
    left: 0;
     height: @startHeight;
     width: @startWidth;
     //background-color: black;
        transform-origin: 0 100%;
    //background-color: black;
    &:before {
    }
  }
}

@maxDuration: 10s;

.build-tree(@index, @duration, @delay) when (@index < @max) {
  & > div {
    @width: max(@startWidth / @index, 1px);
    & when (@index > 0) {
      transform: rotate(-35deg);
    }
    height: (@startHeight / @index);
    width: @width;

    .build-tree(@index + 1, @duration * 0.8, @delay + @duration);

    &:before {
      //box-shadow: 0 (@width * 40 * 0.0174532925) 0 0;
    width: 100%;
    height: 100%;

      content: '';
      position: absolute;
      bottom: 0;
      display: block;
      animation: grow @duration ease-in-out @delay normal forwards;
    }
    
    &.leaves:after {
      width: 100%;
      height: 100%;
      content: '';
      position: absolute;
      bottom: 0;
      display: block;
      animation: growLeaves 5s ease-in-out @duration + @delay normal forwards;
    }
  }
}

@keyframes growLeaves {
  0% {
    background-color: black;
  }
  50% {
    background-color: green;
    -webkit-filter: blur(1px);
  }
  70% {
    background-color: orange;
    -webkit-filter: blur(1px);
  }
  80% {
    background-color: red;
    -webkit-filter: blur(1px);
  }
  90% {
    background-color: brown;
    -webkit-filter: blur(1px);
  }
}

@keyframes grow {
  0% {
    background-color: white;
    width: 0%;
    height: 0%;
  }
  100% {
    background-color: black;
    width: 100%;
    height: 100%;
  }
}

@keyframes fade {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }
}

.trees {
   animation: fade 1.5s ease 7s normal forwards;
}

.tree {
  .build-tree(0, .75s, 0s);
}
  .tree:nth-child(1) {
       transform: translate(100px, 0);
  }

  .tree:nth-child(2) {
       transform: translate(60px, 0);
  }

  .tree:nth-child(3) {
       transform: translate(30px, 190px) rotate(160deg);
  }
  
  .tree:nth-child(4) {
       transform: translate(0, 130px) rotate(270deg);
  }

.tree:nth-child(5) {
       transform: translate(180px, 0) rotate(20deg);
  }

  .tree:nth-child(6) {
       transform: translate(200px, 60px) rotate(99deg);
  }

  .tree:nth-child(7) {
       transform: translate(200px, 110px) rotate(79deg);
  }