refactor: move animation into a separate file

prisca-c · Jul 19, 2024 · 60edd86 · 60edd86
1 parent 6fa4344
commit 60edd86
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 98 deletions.
diff --git a/src/components/Animations/animations.css b/src/components/Animations/animations.css
@@ -0,0 +1,96 @@
+@keyframes shadow-pulse {
+  0% {
+    text-shadow: 0 0 0.0rem var(--cyan-500);
+  }
+  50% {
+    text-shadow: 0 0 0.30rem var(--cyan-500);
+  }
+  100% {
+    text-shadow: 0 0 0.0rem var(--cyan-500);
+  }
+}
+
+/* ---------------------------------- */
+/* ---- Letter Animation UP CSS ---- */
+/* -------------------------------- */
+.letter-up__box {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 0.7em;
+  height: 1em;
+}
+
+.letter-up__word {
+  position: absolute;
+  display: inline-block;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform: rotate(0deg) translate(0, 0);
+  margin: 0;
+}
+
+.letter-up__word--rotate-even {
+  transform: rotate(-10deg) translate(0, -1.2rem);
+}
+
+.letter-up__word--rotate-odd {
+  transform: rotate(10deg) translate(0, -1.2rem);
+}
+/* --------------------- */
+
+
+/* ----------------------------------- */
+/* ---- Fade In UP Animation CSS ---- */
+/* --------------------------------- */
+.fade-in-up-animation {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(2.5rem);
+  transition: opacity 1.3s ease-in-out, transform 1s ease-in-out;
+}
+
+.fade-in-up-animation--active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* --------------------- */
+
+
+/* -------------------------------- */
+/* ---- Fade In Animation CSS ---- */
+/* ------------------------------ */
+.fade-in-animation {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 1.3s ease-in-out;
+}
+
+.fade-in-animation--active {
+  opacity: 1;
+}
+
+
+/* --------------------------------- */
+/* ---- Bouncing Animation CSS ---- */
+/* ------------------------------- */
+.bouncing-animation {
+  display: inline-block;
+  animation: bouncing 1.5s ease-in-out infinite;
+}
+
+@keyframes bouncing {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-0.5rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* --------------------- */
diff --git a/src/components/Components.css b/src/components/Components.css
@@ -187,106 +187,8 @@
   animation: shadow-pulse 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
 }
 
-@keyframes shadow-pulse {
-  0% {
-    text-shadow: 0 0 0.0rem var(--cyan-500);
-  }
-  50% {
-    text-shadow: 0 0 0.30rem var(--cyan-500);
-  }
-  100% {
-    text-shadow: 0 0 0.0rem var(--cyan-500);
-  }
-}
-/* --------------------- */
-
-
-/* ---------------------------------- */
-/* ---- Letter Animation UP CSS ---- */
-/* -------------------------------- */
-.letter-up__box {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 0.7em;
-  height: 1em;
-}
-
-.letter-up__word {
-  position: absolute;
-  display: inline-block;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transform: rotate(0deg) translate(0, 0);
-  margin: 0;
-}
-
-.letter-up__word--rotate-even {
-  transform: rotate(-10deg) translate(0, -1.2rem);
-}
-
-.letter-up__word--rotate-odd {
-  transform: rotate(10deg) translate(0, -1.2rem);
-}
 /* --------------------- */
 
-
-/* ----------------------------------- */
-/* ---- Fade In UP Animation CSS ---- */
-/* --------------------------------- */
-.fade-in-up-animation {
-  display: inline-block;
-  opacity: 0;
-  transform: translateY(2.5rem);
-  transition: opacity 1.3s ease-in-out, transform 1s ease-in-out;
-}
-
-.fade-in-up-animation--active {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* --------------------- */
-
-
-/* -------------------------------- */
-/* ---- Fade In Animation CSS ---- */
-/* ------------------------------ */
-.fade-in-animation {
-  display: inline-block;
-  opacity: 0;
-  transition: opacity 1.3s ease-in-out;
-}
-
-.fade-in-animation--active {
-  opacity: 1;
-}
-
-
-/* --------------------------------- */
-/* ---- Bouncing Animation CSS ---- */
-/* ------------------------------- */
-.bouncing-animation {
-  display: inline-block;
-  animation: bouncing 1.5s ease-in-out infinite;
-}
-
-@keyframes bouncing {
-  0% {
-      transform: translateY(0);
-  }
-  50% {
-      transform: translateY(-0.5rem);
-  }
-  100% {
-      transform: translateY(0);
-  }
-}
-
-/* --------------------- */
-
-
 /* ----------------------- */
 /* ---- MY STACK CSS ---- */
 /* --------------------- */

diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 @import "_utils.css";
+@import "components/Animations/animations.css";
 
 :root {
   font-family: 'Josefin Sans', sans-serif;