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;
 }