leaf falling down in website animation

1<div id="autumn-container">
2	<img src="leaf.png" alt="autumn leaf" style="top: -60px;">
3	<img src="leaf2.png" alt="autumn leaf" style="top: -45px; left: 300px; animation-delay: 2s;">
4	<img src="leaf4.png" alt="autumn leaf" style="width: 28%; top: -122px; left: 110px; animation-delay: 3.2s;">
5	<img src="leaf5.png" alt="autumn leaf" style="width: 35%; top: -55px; left: 198px; animation-delay: 4.4s;">
6	<img src="leaf7.png" alt="autumn leaf" style="width: 38%; top: -18px; left: 560px; animation-delay: 2.25s;">
7	<img src="leaf6.png" alt="autumn leaf" style="width: 33%; top: 0px; left: 401px; animation-delay: 3.8s;">
8</div>

1@keyframes sway { 
2	0% { 
3		transform: rotateZ(-15deg) rotateX(55deg);
4	}
5    30% {
6		transform: rotateZ(20deg) rotateX(60deg);
7		animation-timing-function: ease-in-out;
8	}
9	60% { 
10		transform: rotateZ(-20deg) rotateX(55deg);
11		animation-timing-function: ease-in-out;
12	}
13    100% {
14		transform: rotateZ(0deg) rotateX(58deg);
15		animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);
16		}
17}
18@keyframes fall { 
19	60% {
20		filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
21	}
22	100% {
23		margin-top: 500px;
24		filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));
25	}
26}
27div#autumn-container {
28	width: 768px;
29	height: 400px;
30	border: 1px solid #000;
31	overflow: hidden;
32	position: relative;
33	perspective: 1800px;
34	}
35img[alt="autumn leaf"] {
36	position: absolute;
37	width: 33%;
38	transform-origin: 0px -400px 0px;
39	animation-name: fall, sway;
40	animation-duration: 7s, 8s;
41	animation-fill-mode: both;
42	animation-timing-function: linear, ease-in-out;
43}