<div class="clip">
  <div class="mountain-4"></div>  
  <div class="mountain-3"></div>
  <div class="cloud cloud1"></div>
  <div class="mountain-1"></div>  
  <div class="mountain-2"></div>
  <div class="tree tree2"></div>
  <div class="tree tree1"></div>
  <div class="tree tree0"></div>
   <div class="cloud"></div>
  <div class="tree tree3"></div>
  <div class="tree tree4"></div>
  <div class="tree tree5"></div>
  <div class="close-2"></div>
  <div class="close-1"></div>
  <div class="dry-container">
    <div class="dry"></div>
    <div class="dry dry1"></div>
    <div class="dry dry2"></div>
    <div class="dry dry11"></div>
    <div class="dry dry22"></div>
  </div> 
  <div class="dry-container dry0">
    <div class="dry"></div>
    <div class="dry dry1"></div>
    <div class="dry dry2"></div>
    <div class="dry dry11"></div>
    <div class="dry dry22"></div>
  </div>
</div>

:root {
  --grey1: #53697A;
  --grey2: #4b5b66;
  --grey3: #788896;
  --sky: #C6CDC7;
  --snow: #f1efea;
  --close1: #c6ccc6;
  --close2: #e6e1d7;
  --green1: #606153;
  --green2: #443f35;
  --green3: #52553d;
  --dark: #2e2c25;
  --green11: #4CAF50;
  --green21: #00796B;
  --green31: #004D40;
  --light: whitesmoke;
}
$animation-time: 10s;
$base: 70vh;
*, *:before, *:after {
  box-sizing: border-box;
}
img {
  max-width: 76%;
  margin: auto;
  display: block;
}
.clip {
  position: relative;
  width: $base;
  height: 0.86*$base;
  margin: 15vh auto;
  background: var(--sky);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  overflow: hidden;
}
.clip *,
.clip *:before,
.clip *:after {
  width: 0;
  height: 0;
  border: 0 solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  position: absolute; 
  bottom: 0;
}

.mountain-1 {
  width: 0.8*$base;
  background: linear-gradient(210deg, #5e7180 30%, #3b372d);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 0.6*$base;
  left: 0.05*$base;
}
.mountain-1:after,
.mountain-2:after {
  content: "";
  border-top-color:  var(--snow);
  bottom: auto;
  left: 0.13vh; 
}
.mountain-1:after {
  border-width: .20*$base 0.4*$base 0 0.35*$base; 
}
.mountain-2 {
  width: 0.8*$base;
  background: linear-gradient(200deg, #698194 30%, #545548);
  -webkit-clip-path: polygon(60% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(60% 0%, 0% 100%, 100% 100%);
  height: 0.36*$base;
  left: 0.25*$base;
}
.mountain-2:after {  
  border-width: .10*$base 0.4*$base 0 0.38*$base;
}
.mountain-4 {
  border-width: 0 0.8*$base 0.6*$base 0;
  color: var(--light);
  left: 0;
  animation: $animation-time melt13 infinite;
}
.mountain-3 {
  border-width: 0 0.15*$base 0.65*$base 1.25*$base;
  color: var(--snow);
  left: 0.2*$base;
  animation: $animation-time melt1 infinite;
}

.close-1 {
  border-width: 0 0.45*$base 0.15*$base 0;
  color: var(--close1);
  left: 0;
  filter: drop-shadow(10px 0px 60px rgba(black,.75));
  animation: melt12 $animation-time infinite;
}
.close-2 {
  border-width: 0 0 0.25*$base 0.85*$base;
  color: var(--close2);
  right: 0;
  filter: drop-shadow(-10px 0px 30px rgba(black,.5));
  animation: melt11 $animation-time infinite;
}
.tree {
  border-width: 0 .08*$base 0.35*$base;
  color: var(--green2);
  filter: drop-shadow(10px 0px 10px rgba(black,.25));
  transform-origin: bottom center;
  animation: color-green2 0.5*$animation-time infinite;
}
.tree0 {
  left: -.01*$base;
  transform: scale(1.3);
}
.tree1 {
  left: .1*$base;
  transform: scale(.9,.8);
  animation-name: color-green1;
  color: var(--green1);
}
.tree2 {
  left: .18*$base;
  transform: scale(.9);
}
.tree3 {
  left: .29*$base;
  transform: scale(0.5);
}
.tree4 {
  left: .36*$base;
  transform: scale(0.7);
}
.tree5 {
  right: .1*$base;
  left: auto;
  transform: scale(0.8);
}
.tree0, .tree3, .tree5 {
  color: var(--green3);
  animation-name: color-green3;
}
.cloud {
  top: .3*$base;
  left: 0;
  border-width: 0 0.95*$base 0.25*$base;
  color: var(--snow);
  opacity: .4;
  filter: blur(20px);
  transform: translate3d(-2*0.95*$base, 0%, 0) ;
  animation: move 10s infinite forwards linear;
}
.cloud1 {
  animation-delay: 3s;
  opacity:.6;
  animation-duration: 13s;
  border-bottom-width:0.35*$base;
}
.dry-container {
  left: .77*$base;
  z-index: 0;
}
.dry {
  border-width: 0 0.015*$base 0.4*$base;
  color: var(--dark);
  transform-origin: center bottom;
}

.dry0 {
  transform: translate3d(0, 0, 0) scale(.4);
  left: .15*$base;
  color: var(--dark);
}
.dry1 {
  transform: translate3d(0, -.15*$base ,0) scale(.25) rotate(40deg) ;
}
.dry2 {
  transform: translate3d(0,-.15*$base,0) scale(.25) rotate(-40deg) ;
}
.dry11 {
  transform: translate3d(0, -0.035*$base,0) scale(.45, .3) rotate(45deg) ;
}

.dry22 {
  transform: translate3d(0, -.032*$base,0) scale(.45, .25) rotate(-40deg) ;
}

@keyframes move {
  100% {
    transform: translate3d(0.95*$base, -30%, 0);
  }
}

@keyframes color-green1 {
  30% {
     border-bottom-color: var(--green1);
  }
  60% {
     border-bottom-color: #414c35;
  }
}
@keyframes color-green2 {
  30% {
     border-bottom-color: var(--green2);
  }
  60% {
     border-bottom-color: darken(#314e44,5);
  }
}
@keyframes color-green3 {
  30% {
     border-bottom-color: var(--green3);
  }
  60% {
     border-bottom-color: #2d3e20;
  }
}

@keyframes melt1 {
  60% {
    border-bottom-color: #9E9D24;
  }
  70% {
    border-bottom-color: #A1887F;
  }
}
@keyframes melt13 {
  55% {
    border-bottom-color: #b5b68d;
  }
  60% {
    border-bottom-color: #b0a29d;
  }
}
@keyframes melt11 {
  5% {
    border-bottom-color: var(--close2);
  }
  35% {
    border-bottom-color: #7eae56;
  }
  70% {
    border-bottom-color: #966f26;
  }
}

@keyframes melt12 {
  5% {
    border-bottom-color: var(--close1);
  }
  35% {
    border-bottom-color: #3a7352;
  }
  60% {
    border-bottom-color: #795548;
  }
}