typo and add random duration

snowflakes.css

@@ -15,8 +15,12 @@
   user-select: none;
   -webkit-user-select: none;
   cursor: default;
+  -webkit-animation-name: heart-fall, heart-shake;
+  -webkit-animation-duration: 12s, 3s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
   animation-name: snowflakes-fall, snowflakes-shake;
-  animation-duration: 10s, 3s;
+  animation-duration: 12s, 3s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
 }

snowflakes.js

@@ -2,6 +2,7 @@ const snowflakes = true; // enable/disable snowflakes
 const randomSnowflakes = true; // enable random Snowflakes
 const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices
 const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
+const enableDiffrentDuration = true; // enable different animation duration for random symbols
 const snowflakeCount = 25; // count of random extra snowflakes
 
 
@@ -66,15 +67,20 @@ function addRandomSnowflakes(count) {
 
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
-    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
     const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
     const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
 
     // apply styles
     snowflake.style.left = `${randomLeft}%`;
-    //snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
     snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 14 + 10; // delay (10s to 14s)
+      const randomAnimationDuration2 = Math.random() * 5 + 3; // delay (3s to 5s)
+      snowflake.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
     // add the snowflake to the container
     snowflakeContainer.appendChild(snowflake);
   }
@@ -100,6 +106,13 @@ function initSnowflakes() {
     snowflake.className = 'snowflake';
     snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆
 
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 14 + 10; // delay (10s to 14s)
+      const randomAnimationDuration2 = Math.random() * 5 + 3; // delay (3s to 5s)
+      snowflake.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
     snowflakesContainer.appendChild(snowflake);
   }
 }