%figure  
  - (1..50).each do |i|
    %div

html, body { height: 100vh; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

figure {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: dodgerblue;
  overflow: hidden;
  will-change: width, height, left;
  background: linear-gradient(
    rgba(dodgerblue, .5) 0,
    transparent 85%,
    black 85%,
    black 100%
  );
  animation: sky 30s linear infinite;
}

@keyframes sky {
  from, to { background-color: skyblue; }
  30% { background-color: coral; }
  50% { background-color: tomato; }
  75% { background-color: midnightblue; }
  90% { background-color: beige; }
}

div {
  position: absolute;
  bottom: 15%;
  background: black;  
  transform-origin: center bottom;
  transition:
    width 1s,
    height 1s,
    left 1s;

  &:nth-child(20n) {
    -webkit-clip-path: polygon(50% 0%, 110% 15%, 110% 100%, -10% 100%, -10% 15%);
    clip-path: polygon(50% 0%, 110% 15%, 110% 100%, -10% 100%, -10% 15%);
  }

  &:nth-child(12n) {
    -webkit-clip-path: polygon(-10% 15%, 100% 0, 110% 110%, -10% 100%);
    clip-path: polygon(-10% 15%, 100% 0, 110% 110%, -10% 100%);
  }
  
  @media (max-width: 640px) {
    transform: scaleY(.75);
  }
}

skyline();

setInterval(function(){
  skyline();
}, 1500);

function skyline() {
  $("div").each(function(i){
    var width = Math.floor((Math.random()*4) + 1) + "%";
    var height = Math.floor((Math.random()*75) + 1) + "%";
    var left = 12.5 + i*1.5 + "%";
  
    $(this).css({
      "width" : width,
      "height" : height,
      "left" : left
    });
  });
}