CSS Only Fullscreen Leaf Falling Effect

Preview:

Description:

The leaves are falling before us. The trees are being stripped bare, their branches barren and naked. But you do not have to let the cold winter season stop you from admiring the beauty of nature’s changing colors.

With this tutorial, I will show you how to create a falling leaf animation effect using only HTML and CSS. You can use it as an amazing background for your site. Let’s get started.

See Also:

• CSS Only Snow Falling Effect

How to use it:

1. Add leaf sets to the page.

<section>
  <h2>Falling leaves</h2>
  <div class="set">
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
  </div>
  <div class="set set2">
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
  </div>
  <div class="set set3">
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
    <div><img src="leaves1.png"></div>
    <div><img src="leaves2.png"></div>
    <div><img src="leaves3.png"></div>
    <div><img src="leaves4.png"></div>
  </div>
</section>

2. Make the leaf falling effect fullscreen.

section{
  position:relative ;
  width:100%;
  height:100vh;
  background:linear-gradient( #333, #000);
  overflow:hidden ;
  display:flex;
  justify-content:center;
  align-items:center;
}

3. The required CSS styles for the leaves.

section h2{
  color:#fff;
  font-size:2em;
  text-transform:uppercase ;
  text-shadow:0 1px 4px red;
}
section .set{
  position:absolute ;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events:none;
}
section .set div{
  position:absolute ;
  display:block ;
}
section .set div:nth-child(1){
  left:20%;
  animation:animate 15s linear infinite ;
  animation-delay:-7s;
}
section .set div:nth-child(2){
  left:50%;
  animation:animate 20s linear infinite ;
  animation-delay:-5s;
}
section .set div:nth-child(3){
  left:70%;
  animation:animate 20s linear infinite ;
  animation-delay:0s;
}
section .set div:nth-child(4){
  left:0%;
  animation:animate 15s linear infinite ;
  animation-delay:-5s;
}
section .set div:nth-child(5){
  left:85%;
  animation:animate 18s linear infinite ;
  animation-delay:-10s;
}
section .set div:nth-child(6){
  left:20%;
  animation:animate 15s linear infinite ;
  animation-delay:-7s;
}
section .set div:nth-child(7){
  left:0%;
  animation:animate 12s linear infinite ;
  
}
section .set div:nth-child(8){
  left:60%;
  animation:animate 15s linear infinite ;
}

4. Blur the leaves in Set 2 and Set 3.

.set2{
  transform:scale(2) rotateY(180deg);
  filter:blur(2px);
}
.set3{
  transform:scale(0.8) rotateX(180deg);
  filter:blur(4px);
}

5. The CSS animations for the falling effect.

@keyframes animate{
  0%{
    opacity:0;
    top: -10%;
    transform:translateX(20px) rotate(0deg);
  }
  10%{
    opacity:1;
  }
  20%{
    transform:translateX(-20px) rotate(45deg);
  }
  40%{
    transform:translateX(-20px) rotate(90deg);
  }
  60%{
    transform:translateX(20px) rotate(180deg);
  }
  80%{
    transform:translateX(-20px) rotate(180deg);
  }
  100%{
    top: 110%;
    transform:translateX(-20px) rotate(225deg);
  }
}