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

Posted by: Guest on February-13-2021

Source

Code answers related to "leaf falling down in website animation"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "leaf falling down in website animation"

Code answers related to "leaf falling down in website animation"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us