Pure CSS Fullscreen Falling Leaves Animation Effect

Pure CSS Falling Animation Effect creates a falling leaf animation effect using only HTML and CSS. You can use it as an amazing background for your web page.

falling leaves html code, falling leaves animation css, flowers falling animation html css, css falling objects

How to make use of 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 paper leaf fall effect full screen.

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

3. CSS Styles Required for 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 group 2/3.

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

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

5. CSS animation of 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);
  }
}

CSS Only Fullscreen Leaf Falling Effect, Falling-leaves Plugin/Github


See Demo And Download

Official Website(patelaastha): Click Here

This superior jQuery/javascript plugin is developed by patelaastha. For extra Advanced Usage, please go to the official website.

Share