Создание падающих листьев с использованием CSS

Демонстрация падающих листьев с использованием CSS, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div id="fall-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf.png" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf2.png" alt id="leaf2">
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf4.png alt id="leaf3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf5.png" alt id="leaf4">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf7.png" alt id="leaf5">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/leaf6.png" alt id="leaf6"> 
</div>

CSS

@keyframes sway { 
	0% { transform: rotateZ(-15deg) rotateX(55deg);  }
	30% { transform: rotateZ(20deg) rotateX(60deg); animation-timing-function: ease-in-out; }
	60% { transform: rotateZ(-20deg) rotateX(55deg); animation-timing-function: ease-in-out;  }
	100% { transform: rotateZ(0deg) rotateX(58deg); animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);  }
}
@keyframes fall { 
		60% {
		filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
	}
	100% {
		margin-top: 500px;
		filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));
	}
}
body { margin: 0; } 
div#fall-container { 
  height: 600px;
  overflow: hidden;
  position: relative;
  perspective-origin: center;
  perspective: 1800px;
}
img { 
  position: absolute;
  width: 28%;
  transform-origin: 0px -400px 0px;
  animation-name: fall, sway;
  animation-duration: 7s, 8s;
  animation-fill-mode: both;
  animation-timing-function: linear, ease-in-out;
}
#leaf1 { top: -60px; }
#leaf2 { top: -45px; left: 50%; animation-delay: 2s; transform: rotateX(58deg); }
#leaf3 { width: 28%; top: -122px; left: 22%; animation-delay: 3.2s; }
#leaf4 { width: 25%; top: -55px; left: 38%; animation-delay: 4.4s; }
#leaf5 { width: 28%; top: -18px; left: 70%; animation-delay: 2.25s; }
#leaf6 { width: 23%; top: 0px; left: 55%; animation-delay: 3.8s; }