Merge pull request #53 from 2308-Bread/feat/main_animation

Feat/main animation
2308-Bread · Mar 9, 2024 · 154f1d1 · 154f1d1
2 parents a442c84 + 4b10298
commit 154f1d1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
@@ -12,4 +12,27 @@ body, html {
 .error-container {
     display: flex;
     justify-content: center;
-}
+}
+
+@layer utilities {
+    @keyframes wiggle {
+      25% {
+        transform: translateX(-5px);
+      }
+      50% {
+        transform: translateX(5px);
+      }
+      75% {
+        transform: translateX(-5px);
+      }
+      100% {
+        transform: translateX(5px);
+      }
+    }
+  }
+
+  @layer components {
+    .animate-wiggle {
+      animation: wiggle 0.5s ease-in-out infinite;
+    }
+  }
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -7,7 +7,7 @@ const Main = () => {
   return (
     <div className="main h-screen w-screen flex justify-center items-center">
       <div className='map-wrapper flex flex-col h-[90%] w-[90%] items-center'>
-        <h2 className='text-xl md:text-2xl lg:text-3xl pt-4 md:pt-14 lg:pt-15'>Select a country from our world bakery!</h2>
+        <h2 className='hover:animate-wiggle focus:animate-wiggle text-xl md:text-2xl lg:text-3xl pt-4 md:pt-14 lg:pt-15'>Select a country from our world bakery!</h2>
       <div className="map-background bg-[#E9CC61] shadow-[0_0.5rem_1.5rem_rgba(0,0,0,0.15)] w-[95%] flex justify-center mt-16 p-6 rounded-3xl lg:w-[60vw] xl:w-[50vw]">
         <div className="map-container w-full h-[60vh] overflow-hidden rounded-3xl">
           <MapComponent />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,14 +8,23 @@ module.exports = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        flip: {
+          '0%, 100%': { transform: 'rotateY(0)' },
+          '50%': { transform: 'rotateY(180deg)' },
+        },
+      },
+      animation: {
+        flip: 'flip 1s ease-in-out',
+      },
       fontFamily:{
         'abel': ['Abel', 'sans-serif'],
         satisfy:["Satisfy", "cursive"]
       }
     },
     colors: {
-      green: "#82aa9f",
-      white: "#ffffff",
+      green: "#82AA9F",
+      white: "#FFFFFF",
     },
   },
 };