✨ feat: animation 컴포넌트화

FRONTENDSCHOOL5 · Oct 19, 2023 · a136865 · a136865
1 parent d84b178
commit a136865
Showing 1 changed file with 45 additions and 0 deletions.
diff --git a/src/styles/Animation.js b/src/styles/Animation.js
@@ -0,0 +1,45 @@
+import { keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const zoomIn = keyframes`
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+export const shake = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;