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;
}
4
7
<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>
Thank you!
7
0
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio