From 8219f674b401d118c18a9c9eebaafe859f7c52f9 Mon Sep 17 00:00:00 2001
From: kyuran kim <57716832+gxxrxn@users.noreply.github.com>
Date: Mon, 25 Dec 2023 19:54:20 +0900
Subject: [PATCH] =?UTF-8?q?[#463]=20Loading=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20animation=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0?=
 =?UTF-8?q?=20(#464)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/v1/base/Loading.tsx |  2 +-
 tailwind.config.js      | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/v1/base/Loading.tsx b/src/v1/base/Loading.tsx
index 6d61e66b..b114c8ed 100644
--- a/src/v1/base/Loading.tsx
+++ b/src/v1/base/Loading.tsx
@@ -50,6 +50,6 @@ const LoadingDot = ({
   animationStep?: AnimationStep;
 }) => (
   <span
-    className={`h-[1rem] w-[1rem] rounded-full ${schemes[color]} ${animations[animationStep]}`}
+    className={`h-[1rem] w-[1rem] rounded-full ${schemes[color]} ${animations[animationStep]} translate-y-[5px] opacity-20`}
   ></span>
 );
diff --git a/tailwind.config.js b/tailwind.config.js
index 8b5c65e1..1daed3bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -95,14 +95,14 @@ module.exports = {
           to: { transform: 'translateY(300%)' },
         },
         'dot-flash': {
-          '0%': {
-            opacity: 1,
-            transform: 'translateY(0px)',
-          },
-          '50%,100%': {
+          '0%,33%,100%': {
             opacity: 0.2,
             transform: 'translateY(5px)',
           },
+          '16%': {
+            opacity: 1,
+            transform: 'translateY(0px)',
+          },
         },
       },
       animation: {
@@ -110,9 +110,9 @@ module.exports = {
         'slide-in': '0.3s forwards slide-in ease-in-out',
         'slide-out': '0.3s forwards slide-out ease-in-out',
         'slide-init': '0.3s forwards slide-init ease-in-out',
-        'dot-flash': '1s infinite dot-flash alternate',
-        'dot-flash-delay-0.5': '1s 0.5s infinite dot-flash alternate',
-        'dot-flash-delay-1': '1s 1s infinite dot-flash alternate',
+        'dot-flash': '2s infinite dot-flash linear',
+        'dot-flash-delay-0.5': '2s 0.5s infinite dot-flash linear',
+        'dot-flash-delay-1': '2s 1s infinite dot-flash linear',
       },
     },
   },