<div id="leaves">

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i> 

</div>

body {background: #222;}



/* leaf animations */



#leaves {position:relative;top:-50px;width:100%;text-align: right;}



#leaves i {

    display: inline-block;

    width: 200px;

    height: 150px;

    background: linear-gradient(to bottom right, #309900, #005600);

    transform: skew(20deg);

    border-radius: 5% 40% 70%;

    box-shadow: inset 0px 0px 1px #222;

    border: 1px solid #333;

    z-index: 1;

    -webkit-animation: falling 5s 0s infinite;

}



#leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }

#leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }



#leaves i:before {

  position: absolute;

  content: '';

  top: 117px;

  right: 9px;

  height: 27px;

  width: 32px;

  transform: rotate(49deg);

  border-radius: 0% 15% 15% 0%;

  border-top: 1px solid #222;

  border-bottom: 1px solid #222;

  border-left: 0px solid #222;

  border-right: 1px solid #222;

  background: linear-gradient(to right, rgba(0,100,0,1), #005600);

  z-index: 1;