Template:Sootyeffect.css

.soot_wrap {

 height: 100vh;
 width: 100%;
 background-size: cover;
 background-position: center bottom;
 position: relative;
 overflow: hidden;

}

.soot, .soot:after, .soot::before {

 content: ;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 /* This is where all the little soot particles are. there rendered as a radial gradient. */
 background-image: radial-gradient(4px 4px at 100px 10px, #fff, transparent), /* adjusted to 30px */
                   radial-gradient(6px 6px at 200px 12px, #fff, transparent), /* adjusted to 40px */
                   radial-gradient(3px 3px at 300px 8px, #fff, transparent), /* adjusted to 20px */
                   radial-gradient(4px 4px at 400px 11px, #fff, transparent), /* adjusted to 50px */
                   radial-gradient(6px 6px at 500px 4px, #fff, transparent), /* adjusted to 10px */
                   radial-gradient(3px 3px at 50px 2px, #fff, transparent),  /* adjusted to 45px */
                   radial-gradient(4px 4px at 150px 8px, #fff, transparent), /* adjusted to 35px */
                   radial-gradient(6px 6px at 250px 30px, #fff, transparent), /* adjusted to 25px */
                   radial-gradient(3px 3px at 350px 20px, #fff, transparent), /* adjusted to 50px */
                   radial-gradient(4px 4px at 550px 15px, #fff, transparent); /* adjusted to 40px */
 background-size: 650px 650px;
 animation: sootAnim 3s linear infinite;

}

.soot:after {

 margin-left: -250px;
 opacity: 0.5;
 filter: blur(2px);
 animation-direction: reverse;
 animation-duration: 6s;

}

.soot::before {

 margin-left: -350px;
 opacity: 0.7;
 filter: blur(1px);
 animation-direction: reverse;
 animation-duration: 9s;

} /* 0 percent: render all the particles at the top of the screen with no opactity

25 percent slowly move downwards and set the opacity to 0.7

100 move all the way off the screen and set the opacity back to 0 making it invisable.

this makes it look like a clean smooth loop

• /

@keyframes sootAnim {

 0% {
   transform: translateY(0);
   opacity: 0;
 }
 25% {
   opacity: 0.7;
 }
 100% {
   transform: translateY(130px);
   opacity: 0;
 }

}