rotate leaf

seasonals/autumn.css

@@ -16,12 +16,12 @@
   -webkit-user-select: none;
   cursor: default;
   -webkit-animation-name: leaf-fall, leaf-shake;
-  -webkit-animation-duration: 7s, 3s;
+  -webkit-animation-duration: 7s, 4s;
   -webkit-animation-timing-function: linear, ease-in-out;
   -webkit-animation-iteration-count: infinite, infinite;
   -webkit-user-select: none;
   animation-name: leaf-fall, leaf-shake;
-  animation-duration: 7s, 3s;
+  animation-duration: 7s, 4s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
 }
@@ -36,20 +36,6 @@
   }
 }
 
-@-webkit-keyframes leaf-shake {
-
-  0%,
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  50% {
-    -webkit-transform: translateX(80px);
-    transform: translateX(80px);
-  }
-}
-
 @keyframes leaf-fall {
   0% {
     top: -10%;
@@ -60,15 +46,21 @@
   }
 }
 
-@keyframes leaf-shake {
-
-  0%,
-  100% {
-    transform: translateX(0);
+@-webkit-keyframes leaf-shake {
+  0%, 100% {
+    -webkit-transform: translateX(0) rotate(-15deg);
   }
-
   50% {
-    transform: translateX(80px);
+    -webkit-transform: translateX(80px) rotate(15deg);
+  }
+}
+
+@keyframes leaf-shake {
+  0%, 100% {
+    transform: translateX(0) rotate(-15deg);
+  }
+  50% {
+    transform: translateX(80px) rotate(15deg);
   }
 }
 
@@ -79,55 +71,55 @@
 
 .leaf:nth-of-type(1) {
   left: 10%;
-  animation-delay: 1s, 1s;
+  animation-delay: 1s, 0.5s;
 }
 
 .leaf:nth-of-type(2) {
   left: 20%;
-  animation-delay: 6s, 0.5s;
+  animation-delay: 6s, 1s;
 }
 
 .leaf:nth-of-type(3) {
   left: 30%;
-  animation-delay: 4s, 2s;
+  animation-delay: 4s, 1.5s;
 }
 
 .leaf:nth-of-type(4) {
   left: 40%;
-  animation-delay: 2s, 2s;
+  animation-delay: 2s, 0.8s;
 }
 
 .leaf:nth-of-type(5) {
   left: 50%;
-  animation-delay: 8s, 3s;
+  animation-delay: 8s, 2s;
 }
 
 .leaf:nth-of-type(6) {
   left: 60%;
-  animation-delay: 6s, 2s;
+  animation-delay: 6s, 1.2s;
 }
 
 .leaf:nth-of-type(7) {
   left: 70%;
-  animation-delay: 2.5s, 1s;
+  animation-delay: 2.5s, 0.3s;
 }
 
 .leaf:nth-of-type(8) {
   left: 80%;
-  animation-delay: 1s, 0s;
+  animation-delay: 1s, 1.8s;
 }
 
 .leaf:nth-of-type(9) {
   left: 90%;
-  animation-delay: 3s, 1.5s;
+  animation-delay: 3s, 0.7s;
 }
 
 .leaf:nth-of-type(10) {
   left: 25%;
-  animation-delay: 2s, 0s;
+  animation-delay: 2s, 2.3s;
 }
 
 .leaf:nth-of-type(11) {
   left: 65%;
-  animation-delay: 4s, 2.5s;
+  animation-delay: 4s, 1.4s;
 }

seasonals/autumn.js

@@ -86,8 +86,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() * 12; // delay (0s to 12s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+    const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
+    const randomAnimationDelay2 = Math.random() * 4; // delay for shake+rotate (0s to 4s)
 
     // apply styles
     leaveDiv.style.left = `${randomLeft}%`;
@@ -95,9 +95,9 @@ function addRandomLeaves(count) {
 
     // set random animation duration
     if (enableDiffrentDuration) {
-      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
-      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
-      leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
+      leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
     }
 
     // add the leave to the container
@@ -125,8 +125,8 @@ function initLeaves() {
 
     // set random animation duration
     if (enableDiffrentDuration) {
-      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
-      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
       leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
     }