[#463] Loading 컴포넌트 animation 버그 해결 (#464)

prgrms-web-devcourse · Jun 17, 2024 · 8219f67 · 8219f67
1 parent 150592c
commit 8219f67
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -95,24 +95,24 @@ 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: {
         'page-transition': 'page-transition 0.2s forwards ease-in-out',
         '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',
       },
     },
   },