
To create the CSS Falling Autumn Leaves animation follow the steps below and watch the video tutorial:
Demo:
Step1.
Add HTML
Create the container and add the text and the leaf emoji (in this tutorial I used emoji from: emojipedia.org):
<div class="content">
<div class="hello">Hello</br>Autumn!</div>
<div class="leaves">
<div class="leaf1">🍁</div>
<div class="leaf2">🍁</div>
<div class="leaf3">🍁</div>
<div class="leaf4">🍁</div>
<div class="leaf6">🍁</div>
<div class="leaf7">🍁</div>
<div class="leaf8">🍁</div>
<div class="leaf9">🍁</div>
<div class="leaf10">🍁</div>
<div class="leaf11">🍁</div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
background-color: #fcecd7;
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
overflow: hidden;
}
.content {
position: relative;
}
Style the text:
.hello {
text-align: center;
font-size:80px;
font-weight: bold;
font-family: tahoma;
color: #6a040f;
text-shadow: 1px 1px #370617;
}
Add some leaves:
.leaves {
position: absolute;
}
.leaf1 {
position: absolute;
font-size: 70px;
top:0;
animation: fall 5s linear infinite;
}
.leaf2 {
position: absolute;
font-size: 55px;
top:0;
animation: fall2 6s linear infinite;
}
.leaf3 {
position: absolute;
font-size: 40px;
top:-400px;
left:-100px;
animation: fall 4s linear infinite 1s;
}
.leaf4 {
position: absolute;
font-size: 45px;
top:-400px;
left:300px;
animation: fall2 4s linear infinite 1.5s;
}
.leaf5 {
position: absolute;
font-size: 55px;
top:-410px;
left:250px;
animation: fall3 4s linear infinite 2s;
}
.leaf6 {
position: absolute;
font-size: 55px;
top:-410px;
left:-250px;
animation: fall3 4s linear infinite 1.5s;
}
.leaf7 {
position: absolute;
font-size: 35px;
top:-410px;
left:-350px;
animation: fall2 5s linear infinite .5s;
}
.leaf8 {
position: absolute;
font-size: 75px;
top:-430px;
left:550px;
animation: fall3 5s linear infinite .5s;
}
.leaf9 {
position: absolute;
font-size: 35px;
top:-430px;
left:150px;
animation: fall4 6s linear infinite .3s;
}
.leaf10 {
position: absolute;
font-size: 55px;
top:-430px;
left:450px;
animation: fall5 3.7s linear infinite 1.3s;
}
.leaf11 {
position: absolute;
font-size: 55px;
top:-430px;
left:650px;
animation: fall5 4.7s linear infinite 1.7s;
}
Add CSS @keyframes to animate leaves:
@keyframes fall {
0% {top:-410px; transform: translateX(-100px) rotateX(180deg);}
100% {top:400px; transform: translateX(250px) rotateX(-180deg);}
}
@keyframes fall2 {
0% {top:-410px; transform: translateX(50px) rotateX(-90deg);}
100% {top:400px; transform: translateX(-350px) rotateX(180deg);}
}
@keyframes fall3 {
0% {top:-430px; transform: translateX(0px) rotateX(-180deg);}
100% {top:400px; transform: translateX(-400px) rotateX(180deg);}
}
@keyframes fall4 {
0% {top:-430px; transform: translateX(0px) rotateY(-180deg);}
100% {top:400px; transform: translateX(-400px) rotateY(180deg);}
}
@keyframes fall5 {
0% {top:-410px; transform: translateX(-100px) rotateY(180deg);}
100% {top:400px; transform: translateX(250px) rotateY(-180deg);}
}
Watch also the video tutorial:
Enjoy coding!
Read also: