Answers for "leaf falling down in website animation"

leaf falling down in website animation

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

leaf falling down in website animation

@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));
	}
}
div#autumn-container {
	width: 768px;
	height: 400px;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
	perspective: 1800px;
	}
img[alt="autumn leaf"] {
	position: absolute;
	width: 33%;
	transform-origin: 0px -400px 0px;
	animation-name: fall, sway;
	animation-duration: 7s, 8s;
	animation-fill-mode: both;
	animation-timing-function: linear, ease-in-out;
}