improve animations

QwikDev · Dec 26, 2024 · fa660ec · fa660ec
1 parent c3f7329
commit fa660ec
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/apps/website/src/components/home/cli-copy/cli-copy.css b/apps/website/src/components/home/cli-copy/cli-copy.css
@@ -5,6 +5,8 @@
     display: flex;
     align-items: center;
     gap: var(--space-3xs);
+    transition: background-color 0.35s;
+    transition-timing-function: var(--qa-hover);
 }
 
 .cli-copy:hover {

diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -7,6 +7,7 @@ import Layout from "src/layouts/Layout.astro";
 <Layout title="Qwik + Astro">
   <div class="grid-line" aria-hidden="true"></div>
   <main>
+    <div class="background"></div>
     <div class="intro">
       <h1>
         {
@@ -39,6 +40,11 @@ import Layout from "src/layouts/Layout.astro";
 </Layout>
 
 <style>
+  .background {
+    height: 160px;
+    background: lightblue;
+  }
+
   h1 {
     margin-block: var(--space-m);
     display: flex;
@@ -89,7 +95,7 @@ import Layout from "src/layouts/Layout.astro";
     display: inline-block;
     opacity: 0;
     animation: fade-in 0.5s forwards;
-    animation-timing-function: var(--fade);
+    animation-timing-function: var(--qa-fade);
   }
 
   @keyframes fade-in {

diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
@@ -85,8 +85,8 @@
   --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
 
   /* Animations */
-  --fade: cubic-bezier(0.8, -0.4, 0.5, 1);
-
+  --qa-fade: cubic-bezier(0.8, -0.4, 0.5, 1);
+  --qa-hover: linear(0, 0.417 25.5%, 0.867 49.4%, 1 57.7%, 0.925 65.1%, 0.908 68.6%, 0.902 72.2%, 0.916 78.2%, 0.988 92.1%, 1);
 }
 
 *,