Leaves Animation Archives

To create the CSS Falling Autumn Leaves animation follow the steps below and watch the video tutorial:

Demo:

*to see the animation on the website click here.

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!