diff --git a/seasonals/autumn.css b/seasonals/autumn.css index 880df62..5bcedda 100644 --- a/seasonals/autumn.css +++ b/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; } \ No newline at end of file diff --git a/seasonals/autumn.js b/seasonals/autumn.js index 2482cd7..fbdda54 100644 --- a/seasonals/autumn.js +++ b/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`; }