working

autumn.css

@@ -14,13 +14,13 @@
   text-shadow: 0 0 5px #000;
   user-select: none;
   -webkit-animation-name: leaf-fall, leaf-shake;
-  -webkit-animation-duration: 10s, 6s;
+  -webkit-animation-duration: 7s, 3s;
   -webkit-animation-timing-function: linear, ease-in-out;
   -webkit-animation-iteration-count: infinite, infinite;
   -webkit-user-select: none;
   cursor: default;
   animation-name: leaf-fall, leaf-shake;
-  animation-duration: 10s, 6s;
+  animation-duration: 7s, 3s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
 }

autumn.js

@@ -97,7 +97,7 @@ function addRandomLeaves(count) {
   for (let i = 0; i < count; i++) {
     // create a new leave element
     const leaveDiv = document.createElement('div');
-    leaveDiv.classList.add('leave');
+    leaveDiv.className = "leaf";
 
     // pick a random leaf symbol
     const imageSrc = images[Math.floor(Math.random() * images.length)];
@@ -109,8 +109,8 @@ function addRandomLeaves(count) {
 
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
-    const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
+    const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s)
-    const randomAnimationDelay2 = Math.random() * 6; // delay (0s to 6s)
+    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
 
     // apply styles
     leaveDiv.style.left = `${randomLeft}%`;