change animation on website name hover

snapsnapturtle · Aug 19, 2023 · a414069 · a414069
1 parent d4e213f
commit a414069
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 153 deletions.
diff --git a/styles/animations.css b/styles/animations.css
@@ -4,157 +4,11 @@
     }
 }
 
-/* https://github.com/elrumordelaluz/csshake */
-@keyframes shake-hard {
-    0%,
-    to {
-        transform: translate(0) rotate(0);
+@keyframes move-gradient {
+    0% {
+        background-position: 0 center
     }
-    2% {
-        transform: translate(1.5px, 2.5px) rotate(1.5deg);
-    }
-    4% {
-        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
-    }
-    6% {
-        transform: translate(1.5px, 0.5px) rotate(1.5deg);
-    }
-    8% {
-        transform: translate(1.5px, -0.5px) rotate(1.5deg);
-    }
-    10% {
-        transform: translate(-0.5px, 1.5px) rotate(1.5deg);
-    }
-    12% {
-        transform: translate(0.5px, -1.5px) rotate(0.5deg);
-    }
-    14% {
-        transform: translate(2.5px, -1.5px) rotate(0.5deg);
-    }
-    16% {
-        transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
-    }
-    18% {
-        transform: translate(2.5px, 1.5px) rotate(0.5deg);
-    }
-    20% {
-        transform: translate(1.5px, 0.5px) rotate(-0.5deg);
-    }
-    22% {
-        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
-    }
-    24% {
-        transform: translate(2.5px, 0.5px) rotate(-0.5deg);
-    }
-    26% {
-        transform: translate(1.5px, -0.5px) rotate(1.5deg);
-    }
-    28% {
-        transform: translate(2.5px, 1.5px) rotate(0.5deg);
-    }
-    30% {
-        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
-    }
-    32% {
-        transform: translate(1.5px, -1.5px) rotate(1.5deg);
-    }
-    34% {
-        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
-    }
-    36% {
-        transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
-    }
-    38% {
-        transform: translate(0.5px, 1.5px) rotate(-0.5deg);
-    }
-    40% {
-        transform: translate(0.5px, 1.5px) rotate(1.5deg);
-    }
-    42% {
-        transform: translate(2.5px, 1.5px) rotate(-0.5deg);
-    }
-    44% {
-        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
-    }
-    46% {
-        transform: translate(-1.5px, 0.5px) rotate(0.5deg);
-    }
-    48% {
-        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
-    }
-    50% {
-        transform: translate(2.5px, -1.5px) rotate(0.5deg);
-    }
-    52% {
-        transform: translate(0.5px, 2.5px) rotate(-0.5deg);
-    }
-    54% {
-        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
-    }
-    56% {
-        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
-    }
-    58% {
-        transform: translate(2.5px, 2.5px) rotate(0.5deg);
-    }
-    60% {
-        transform: translate(2.5px, 1.5px) rotate(1.5deg);
-    }
-    62% {
-        transform: translate(1.5px, -1.5px) rotate(-0.5deg);
-    }
-    64% {
-        transform: translate(0.5px, -1.5px) rotate(1.5deg);
-    }
-    66% {
-        transform: translate(1.5px, 2.5px) rotate(1.5deg);
-    }
-    68% {
-        transform: translate(2.5px, -1.5px) rotate(1.5deg);
-    }
-    70% {
-        transform: translate(2.5px, 1.5px) rotate(1.5deg);
-    }
-    72% {
-        transform: translate(2.5px, -1.5px) rotate(1.5deg);
-    }
-    74% {
-        transform: translate(1.5px, 2.5px) rotate(-0.5deg);
-    }
-    76% {
-        transform: translate(0.5px, -0.5px) rotate(1.5deg);
-    }
-    78% {
-        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
-    }
-    80% {
-        transform: translate(2.5px, -1.5px) rotate(-0.5deg);
-    }
-    82% {
-        transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
-    }
-    84% {
-        transform: translate(-0.5px, -0.5px) rotate(1.5deg);
-    }
-    86% {
-        transform: translate(1.5px, -1.5px) rotate(1.5deg);
-    }
-    88% {
-        transform: translate(0.5px, 1.5px) rotate(1.5deg);
-    }
-    90% {
-        transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
-    }
-    92% {
-        transform: translate(2.5px, -1.5px) rotate(-0.5deg);
-    }
-    94% {
-        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
-    }
-    96% {
-        transform: translate(2.5px, -0.5px) rotate(1.5deg);
-    }
-    98% {
-        transform: translate(1.5px, 1.5px) rotate(1.5deg);
+    100% {
+        background-position: 100% center
     }
 }
diff --git a/styles/common.css b/styles/common.css
@@ -47,12 +47,13 @@ a:active {
     display: inline-block;
     background: var(--fancy-gradient);
     background-clip: text;
+    background-size: 300% auto;
     -webkit-text-fill-color: transparent;
 }
 
 .whois a:hover {
     box-shadow: none;
-    animation: shake-hard 500ms cubic-bezier(0.75, 0, 0.5, 1) infinite;
+    animation: move-gradient 2s linear infinite;
 }
 
 @media (min-width: 812px) {

diff --git a/styles/variables.css b/styles/variables.css
@@ -3,6 +3,6 @@
     --text-primary: rgba(255, 255, 255, 0.8);
     --text-link: rgba(255, 255, 255, 1);
     --text-secondary: rgba(255, 255, 255, 0.4);
-    --fancy-gradient: linear-gradient(100deg, #ff377f 0%, #c984ff 44%, #3971ff 81%, #3971ff 100%);
+    --fancy-gradient: linear-gradient(100deg, #ff377f 0%, #c984ff 15%, #3971ff 26%, #3971ff 33%, #3971ff 48%, #c984ff 59%, #ff377f 66%, #c984ff 81%, #3971ff 91%, #3971ff 100%);
     --font-family: 'Recursive', monospace;
 }