CSS: leaf falling down in website animation Example

By

CSS Example: This is the "leaf falling down in website animation" Example. compiled from many sources on the internet by SimpleTutorials.org

leaf falling down in website animation

autumn leaf autumn leaf autumn leaf autumn leaf autumn leaf autumn leaf

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;
}



* Summary: This "leaf falling down in website animation" CSS Example is compiled from the internet. If you have any questions, please leave a comment. Thank you!

Others