Merge pull request #35 from binhtran432k/fix/animation

fix: use customized animation

Author: binhtddev

src/components/scroll-down/scroll-down.tsx

@@ -1,24 +1,15 @@
 import { component$ } from "@builder.io/qwik";
-import { clsx } from "clsx";
 
 export default component$(() => {
   return (
     <button class="flex flex-col items-center" aria-label="Scroll down">
       <div class="flex h-10 w-6 justify-center rounded-xl border-2 border-current">
-        <div class="mt-2 h-3 animate-bounce [animation-duration:300ms]">
-          <div class="h-1 w-1 animate-bounce rounded-[50%] bg-current [animation-duration:300ms]" />
-        </div>
+        <div class="mt-2 h-1 w-1 animate-deepBounce rounded-[50%] bg-current [animation-duration:300ms]" />
       </div>
       <div class="mb-3 flex flex-col py-1">
-        {[...Array(3)].map((_, i) => (
-          <div
-            key={i}
-            class={clsx(
-              "h-3 w-3 rotate-45 animate-[pulse_1s_ease-in-out_alternate_infinite] border-b-2 border-r-2 border-current opacity-25",
-              i > 0 && `[animation-delay:${(i * 100).toFixed(0)}ms]`,
-            )}
-          />
-        ))}
+        <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:100ms]" />
+        <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:200ms]" />
+        <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:300ms]" />
       </div>
     </button>
   );

src/components/social/social-link.tsx

@@ -5,10 +5,10 @@ export default component$(
   ({ label, href, icon }: { label: string; href: string; icon: JSXOutput }) => {
     return (
       <div class="group relative flex place-items-center">
-        <span class="absolute left-0 top-0 origin-[38%48%] text-info group-hover:animate-spin group-hover:[animation-duration:200ms]">
+        <span class="absolute left-0 top-0 hidden text-info group-hover:block group-hover:animate-around group-hover:[animation-duration:200ms]">
           {icon}
         </span>
-        <span class="absolute left-0 top-0 origin-[58%40%] text-danger group-hover:animate-spin group-hover:[animation-duration:200ms] group-hover:[animation-delay:100ms]">
+        <span class="absolute left-0 top-0 hidden text-danger group-hover:block group-hover:animate-around group-hover:[animation-duration:200ms] group-hover:[animation-delay:100ms]">
           {icon}
         </span>
         <Link

tailwind.config.js

@@ -15,7 +15,30 @@ export default {
       foreground: colors.gray["50"],
       background: colors.gray["950"],
     },
-    extend: {},
+    extend: {
+      keyframes: {
+        deepPulse: {
+          "0%, 100%": { opacity: 1 },
+          "50%": { opacity: 0 },
+        },
+        deepBounce: {
+          "0%, 100%": { transform: "translateY(-50%)" },
+          "50%": { transform: "translateY(0)" },
+        },
+        around: {
+          "0%": { transform: "translate3d(12%,-12%,0)" },
+          "25%": { transform: "translate3d(12%,12%,0)" },
+          "50%": { transform: "translate3d(-12%,12%,0)" },
+          "75%": { transform: "translate3d(-12%,-12%,0)" },
+          "100%": { transform: "translate3d(0,0,0)" },
+        },
+      },
+      animation: {
+        deepPulse: "deepPulse 1s alternate infinite",
+        deepBounce: "deepBounce 1s infinite",
+        around: "around 1s infinite",
+      },
+    },
   },
   plugins: [],
 };