From 3e6a8c8d8aa47844133f5e8f585da6377e8ce7fa Mon Sep 17 00:00:00 2001
From: Marukome0743 <akio.muto@bnt.benextgroup.jp>
Date: Tue, 1 Oct 2024 15:14:46 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8Frefactor:=20remove=20scale=20?=
 =?UTF-8?q?down=20up=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/button/lineAddFriends.tsx |  7 +++++--
 app/components/layout/heading.tsx        |  4 ++--
 app/footer.tsx                           |  2 +-
 app/globals.css                          | 26 ++++++++----------------
 app/header.tsx                           |  6 +++---
 app/page.tsx                             |  6 +++---
 app/partner/page.tsx                     |  2 +-
 7 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/app/components/button/lineAddFriends.tsx b/app/components/button/lineAddFriends.tsx
index 615e4d7b..ff95b586 100644
--- a/app/components/button/lineAddFriends.tsx
+++ b/app/components/button/lineAddFriends.tsx
@@ -10,7 +10,10 @@ export function LineAddFriends({
 }: Readonly<{ linkLink: string }>): JSX.Element {
   return (
     <Bounce>
-      <Link href={linkLink} className="block mx-auto scale-down-up w-fit">
+      <Link
+        href={linkLink}
+        className="block button-pop duration-200 ease-out mx-auto w-fit"
+      >
         <Image
           src="/line_add_friends.avif"
           width={116}
@@ -30,7 +33,7 @@ export function LineApply({
     <Bounce>
       <Link
         href={lineLink}
-        className={`bg-[#00C300] font-bold gap-2 h-12 inline-flex items-center justify-center px-4 rounded-xl scale-down-up shadow-lg text-lg text-white ${styles.greenShine}`}
+        className={`bg-[#00C300] button-pop duration-200 ease-out font-bold gap-2 h-12 inline-flex items-center justify-center px-4 rounded-xl shadow-lg text-lg text-white ${styles.greenShine}`}
       >
         LINEで簡単応募する！
         <ArrowRightIcon className={`size-5 ${styles.arrowRight}`} />
diff --git a/app/components/layout/heading.tsx b/app/components/layout/heading.tsx
index 7c30a9b0..d38d9eb5 100644
--- a/app/components/layout/heading.tsx
+++ b/app/components/layout/heading.tsx
@@ -26,7 +26,7 @@ function Breadcrumb({ menus }: Readonly<{ menus: Menu[] }>): JSX.Element {
         <li className="flex items-center">
           <Link
             href="/"
-            className="flex items-center gap-1 p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
+            className="button-pop duration-200 ease-out flex items-center gap-1 p-1 rounded-xl underline hover:bg-gray-200"
           >
             <HomeIcon className="size-5 text-sky-400" />
             ホーム
@@ -37,7 +37,7 @@ function Breadcrumb({ menus }: Readonly<{ menus: Menu[] }>): JSX.Element {
             {menus.length > 1 && index === 0 ? (
               <Link
                 href={menu.pathname}
-                className="p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
+                className="button-pop duration-200 ease-out p-1 rounded-xl underline hover:bg-gray-200"
               >
                 {menu.name}
               </Link>
diff --git a/app/footer.tsx b/app/footer.tsx
index 48d5e60f..550d38a0 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -12,7 +12,7 @@ export function Footer(): JSX.Element {
             <li key={menu.name}>
               <Link
                 href={menu.pathname}
-                className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-300"
+                className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-orange-400 hover:bg-gray-300"
               >
                 {menu.name}
               </Link>
diff --git a/app/globals.css b/app/globals.css
index 6dabc0aa..d5af2f96 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -20,10 +20,19 @@ summary::-webkit-details-marker {
   @media (prefers-reduced-motion: no-preference) {
     animation: button-pop .25s ease-out;
   }
+  & > img {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: button-pop .25s ease-out;
+    }
+  }
   &:active:hover,
   &:active:focus {
     animation: button-pop 0s ease-out;
     transform: scale(0.95);
+    & > img {
+      animation: button-pop 0s ease-out;
+      transform: scale(0.95);
+    }
   }
 }
 
@@ -41,13 +50,6 @@ summary::-webkit-details-marker {
   animation-range: contain 0% contain 50%;
 }
 
-.scale-down-up:focus {
-  animation: scale-down-up 200ms;
-  & > img {
-    animation: scale-down-up 200ms;
-  }
-}
-
 .scale-up-down {
   animation: scale-up-down 2s;
   &:nth-child(2) {
@@ -145,16 +147,6 @@ summary::-webkit-details-marker {
   }
 }
 
-@keyframes scale-down-up {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.9);
-  }
-}
-
 @keyframes scale-up-down {
   0%,
   100% {
diff --git a/app/header.tsx b/app/header.tsx
index 3dc4c13a..4b48de45 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -89,7 +89,7 @@ function DropdownMenu({
 
   return (
     <details ref={ref} className="relative lg:hidden">
-      <summary className="block h-fit min-h-0 p-1 scale-down-up">
+      <summary className="block button-pop duration-200 ease-out h-fit min-h-0 p-1">
         <Bars3BottomRightIcon className="size-7" />
       </summary>
       <nav>
@@ -98,7 +98,7 @@ function DropdownMenu({
             <li key={menu.name}>
               <Link
                 href={menu.pathname}
-                className="block font-bold px-3 py-1 rounded-xl scale-down-up text-nowrap text-orange-400 focus:bg-gray-400 hover:bg-gray-200"
+                className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-nowrap text-orange-400 focus:bg-gray-400 hover:bg-gray-200"
               >
                 {menu.name}
               </Link>
@@ -151,7 +151,7 @@ function Navigation({
         <li key={menu.name}>
           <Link
             href={menu.pathname}
-            className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-200"
+            className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-orange-400 hover:bg-gray-200"
           >
             {menu.name}
           </Link>
diff --git a/app/page.tsx b/app/page.tsx
index ef79f043..6ac9edb9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,7 +13,7 @@ export default function Home(): JSX.Element {
       {/* block className is necessary for Safari behavior */}
       <Link
         href={KANTO_EVENT.pathname}
-        className="block scale-down-up sticky top-0 w-full z-20 sm:inline sm:static"
+        className="block button-pop duration-200 ease-out sticky top-0 w-full z-20 sm:inline sm:static"
       >
         <Image
           src="/202410_kanto_banner_start.avif"
@@ -21,7 +21,7 @@ export default function Home(): JSX.Element {
           height={162}
           alt="こどもテックキャラバン-関東イベントバナー"
           priority={true}
-          className="w-full"
+          className="duration-200 ease-out w-full"
         />
       </Link>
       <section>
@@ -66,7 +66,7 @@ export default function Home(): JSX.Element {
         <h2 className="font-bold font-zenMaruGothic text-2xl">
           <Link
             href={SECRETARIAT.pathname}
-            className="block scale-down-up text-sky-400 underline"
+            className="block button-pop duration-200 ease-out text-sky-400 underline"
           >
             事務局の想い
           </Link>
diff --git a/app/partner/page.tsx b/app/partner/page.tsx
index dfde8700..e84c92af 100644
--- a/app/partner/page.tsx
+++ b/app/partner/page.tsx
@@ -51,7 +51,7 @@ export default function SponserPage(): JSX.Element {
           <h2 className="font-bold font-zenMaruGothic text-3xl">
             <Link
               href={PARTNER.pathname + area.menu.pathname}
-              className={`block mx-auto scale-down-up underline w-fit ${area.color.text}`}
+              className={`block button-pop duration-200 ease-out mx-auto underline w-fit ${area.color.text}`}
             >
               {area.menu.name}
             </Link>