update: add some transition and animation

Author: adam5096

location.html

@@ -146,7 +146,7 @@ <h2>台中清水旗艦店</h2>
                             <a href="./location-02.html" target="_blank">詳細資訊</a>
                         </div>
                         <!-- card-4 -->
-                        <div class="location-card card-3">
+                        <div class="location-card card-4">
                             <div class="img-frame">
                                 <img src="./img-location/location-kaohsiung-figure.png" alt="高雄中正形象店">
                             </div>
@@ -180,7 +180,7 @@ <h2>高雄中正形象店</h2>
                             <a href="./location-02.html" target="_blank">詳細資訊</a>
                         </div>
                         <!-- card-5 -->
-                        <div class="location-card card-3">
+                        <div class="location-card card-5">
                             <div class="img-frame">
                                 <img src="./img-location/location-kaohsiung-dream.png" alt="高雄夢時代店">
                             </div>

series-02.css

@@ -137,6 +137,17 @@
 }
 
 @layer components {
+  @keyframes floating {
+    0% {
+      transform: translateY(-8px);
+    }
+    50% {
+      transform: translateY(8px);
+    }
+    100% {
+      transform: translateY(-8px);
+    }
+  }
   .sub-nav {
     width: 100%;
     --nav-textBorderBottom: #aa0601;
@@ -364,6 +375,19 @@
             }
           }
         }
+        & .items:nth-of-type(2n) {
+          animation-name: floating;
+          animation-duration: 4s;
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+        }
+        & .items:nth-of-type(2n-1) {
+          animation-name: floating;
+          animation-delay: 2s;
+          animation-duration: 4s;
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+        }
       }
 
       & .grid-container {
@@ -390,6 +414,7 @@
         justify-content: center;
         align-items: center;
         padding-block: 80px;
+        color: #555;
 
         & .prev,
         .next,
@@ -399,11 +424,22 @@
           align-items: center;
           border: 1px solid #555555;
         }
+        & .prev:hover,
+        .next:hover,
+        .page:hover {
+          transition: all 0.3 ease;
+          transform: translateY(-10px);
+          cursor: pointer;
+          background-color: var(--button-bg);
+          color: #ffb400;
+        }
+
         & .prev,
         .next {
           width: 81px;
           height: 48px;
           font-size: 19px;
+          background-color: #f2f2f2;
         }
 
         & .page {

series.css

@@ -137,6 +137,17 @@
 }
 
 @layer components {
+  @keyframes floating {
+    0% {
+      transform: translateY(-8px);
+    }
+    50% {
+      transform: translateY(8px);
+    }
+    100% {
+      transform: translateY(-8px);
+    }
+  }
   .sub-nav {
     width: 100%;
     --nav-textBorderBottom: #aa0601;
@@ -318,6 +329,7 @@
           position: relative;
           /* max-width: 306px; */
           width: auto;
+
           & .img-container {
             /* width: 306px; */
             height: 100%;
@@ -378,6 +390,20 @@
             }
           }
         }
+
+        & .items:nth-of-type(2n) {
+          animation-name: floating;
+          animation-duration: 4s;
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+        }
+        & .items:nth-of-type(2n-1) {
+          animation-name: floating;
+          animation-delay: 2s;
+          animation-duration: 4s;
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+        }
       }
 
       & .grid-container {
@@ -404,6 +430,7 @@
         justify-content: center;
         align-items: center;
         padding-block: 80px;
+        color:#555;
 
         & .prev,
         .next,
@@ -413,11 +440,22 @@
           align-items: center;
           border: 1px solid #555555;
         }
+        & .prev:hover,
+        .next:hover,
+        .page:hover {
+          transition: all 0.3 ease;
+          transform: translateY(-10px);
+          cursor: pointer;
+          background-color: var(--button-bg);
+          color: #ffb400;
+        }
+
         & .prev,
         .next {
           width: 81px;
           height: 48px;
           font-size: 19px;
+          background-color: #F2F2F2;
         }
 
         & .page {