SOURCE

<div class="leaves">
  <div class="leaf">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="stem"></div>
  </div>
  <div class="leaf">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="stem"></div>
  </div>
  <div class="leaf">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="stem"></div>
  </div>
  <div class="leaf">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="stem"></div>
  </div>
  <div class="leaf">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="stem"></div>
  </div>
</div>

$colors: #851D21, #F3522C, #EBDF02, #88E014, #385E31;
$rotate: -30deg, -15deg, 0deg, 15deg, 30deg;
$translate: 60px, 30px, 0, 30px, 60px;
$start: 380px;
$end: -50px;
* {
  box-sizing:border-box;
}
body {
  background:#1d1f20;
  padding-top:40px
}
.leaves {
  // text-align:center;
  height:300px;
  width:42em;
  margin:0 auto;
  // position:relative;
}
.leaf {
  position:relative;
  width:8em;
  display:inline-block;
  bottom:400px;
  // left:15%;
  // transform:rotateZ(0deg);
}
.leaf .petal{
  width: 4.5em;
  height: 4.5em;
  -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  -webkit-transform: rotateZ(-45deg)   ;
  transform: rotateZ(-45deg);
  margin:0 auto;
  position:absolute;
}
.petal:nth-child(1) {
  position:static;
}
.petal:nth-child(2) {
  top:30px;
  transform: rotateZ(-80deg);
}
.petal:nth-child(3) {
  top:30px;
  transform: rotateZ(-10deg);
  right:0;
}
.petal:nth-child(4) {
  top:70px;
  transform: rotateZ(-102deg);
  left:-5px
}
.petal:nth-child(5) {
  top:70px;
  transform: rotateZ(12deg);
  right:-5px;
}
.stem {
  height:120px;
  width:18px;
  border-right:6px solid darken(#851D21, 15%);
  border-radius:50%;
  bottom:30px;
  position:relative;
  content:"";
  display:block;
  margin:0 auto;
  left:-6px;
}
.stem:before {
  height:10px;
  width:40px;
  border-bottom:3px solid darken(#851D21, 15%);
  border-radius:0% 20% 50% 50%;
  top:50px;
  position:absolute;
  content:"";
  left:-25px;
  z-index:99;
  transform:rotateZ(15deg);
}
.stem:after {
  height:10px;
  width:45px;
  border-bottom:3px solid darken(#851D21, 15%);
  border-radius:0% 20% 50% 50%;
  top:20px;
  position:absolute;
  content:"";
  left:10px;
  transform:rotateZ(-30deg);
}

@for $i from 1 through 5 {
  $color: nth($colors, $i);
  // $length: ((random(100) / 100) * 2) + 1;
  $length: 2;
  .leaf:nth-of-type(#{$i}) {
    // transform:rotate(nth($rotate, $i)) translateY(nth($translate, $i));
    animation: falling#{$i} #{$length}s ease-in-out 1;
    animation-delay:#{$i * 0.3}s;
    animation-fill-mode:forwards;
  }
  .leaf:nth-of-type(#{$i}) .petal {
    background:$color;
  }
  .leaf:nth-of-type(#{$i}) .stem, .leaf:nth-of-type(#{$i}) .stem:before, .leaf:nth-of-type(#{$i}) .stem:after  {
    border-color: darken($color, 15%);
  }
}

@keyframes falling1{
  0%   { bottom:$start; left: 0%; -webkit-transform: scale3d(1,.5,1) rotateZ(30deg); }
    50%   { bottom:100px; left: 20%; -webkit-transform: scale3d(1,.75,1) rotateZ(30deg); }
  100% { bottom:$end - 30; left: 0%; -webkit-transform: scale3d(1,1,1) rotateZ(-30deg);}
}
@keyframes falling2{
  0%   { bottom:$start; left: 30%; -webkit-transform: scale3d(1,.4,1) rotateZ(30deg); }
    50%   { bottom:200px; left: -10%; -webkit-transform: scale3d(1,.6,1) rotateZ(30deg); }
  100% { bottom:$end - 15; left: 0%; -webkit-transform: scale3d(1,1,1) rotateZ(-15deg);}
}
@keyframes falling3 {
  0%   { bottom:$start - 100; left: -20%; -webkit-transform: scale3d(1,.5,1) rotateZ(30deg); }
    50%   { bottom:100px; left: 20%; -webkit-transform: scale3d(1,.75,1) rotateZ(30deg); }
  100% { bottom:$end; left: 0%; -webkit-transform: scale3d(1,1,1) rotateZ(0deg);}
}
@keyframes falling4{
  0%   { bottom:$start - 100; left: -40%; -webkit-transform: scale3d(1,.5,1) rotateZ(30deg); }
    50%   { bottom:100px; left: 30%; -webkit-transform: scale3d(1,.75,1) rotateZ(30deg); }
  100% { bottom:$end - 15; left: 0%; -webkit-transform: scale3d(1,1,1) rotateZ(15deg);}
}
@keyframes falling5{
  0%   { bottom:$start - 100; left: -10%; -webkit-transform: scale3d(1,.4,1) rotateZ(45deg); }
    35%   { bottom:100px; left: 10%; -webkit-transform: scale3d(1,.6,1) rotateZ(40deg); }
      75%   { bottom:100px; left: -25%; -webkit-transform: scale3d(1,.75,1) rotateZ(35deg); }
  100% { bottom:$end - 30; left: 0%; -webkit-transform: scale3d(1,1,1) rotateZ(15deg);}
}