complete many assets

src/components/navigation/NavigationGrid.astro

@@ -20,9 +20,9 @@ const gapClasses = {
 };
 ---
 
-<section class="navigation-grid-container">
+<section class="navigation-grid-container" data-reveal data-reveal-distance="64px" data-reveal-delay="0s">
   {(title || description) && (
-    <div class="grid-header">
+    <div class="grid-header" data-reveal data-reveal-distance="32px" data-reveal-delay="0.08s">
       {title && <h2 class="grid-title">{title}</h2>}
       {description && <p class="grid-description">{description}</p>}
     </div>
@@ -44,7 +44,6 @@ const gapClasses = {
   .grid-header {
     text-align: center;
     margin-bottom: 3rem;
-    animation: fadeIn 0.6s ease-out;
   }
   
   .grid-title {
@@ -109,28 +108,17 @@ const gapClasses = {
     }
   }
   
-  /* 交错动画 */
   .navigation-grid > * {
-    animation: fadeIn 0.6s ease-out;
-    animation-fill-mode: both;
+    --card-delay: 0s;
   }
   
-  .navigation-grid > *:nth-child(1) { animation-delay: 0.1s; }
-  .navigation-grid > *:nth-child(2) { animation-delay: 0.2s; }
-  .navigation-grid > *:nth-child(3) { animation-delay: 0.3s; }
-  .navigation-grid > *:nth-child(4) { animation-delay: 0.4s; }
-  .navigation-grid > *:nth-child(5) { animation-delay: 0.5s; }
-  .navigation-grid > *:nth-child(6) { animation-delay: 0.6s; }
-  .navigation-grid > *:nth-child(n+7) { animation-delay: 0.7s; }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(20px) scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
+  .navigation-grid > *:nth-child(1) { --card-delay: 0s; }
+  .navigation-grid > *:nth-child(2) { --card-delay: 0.08s; }
+  .navigation-grid > *:nth-child(3) { --card-delay: 0.16s; }
+  .navigation-grid > *:nth-child(4) { --card-delay: 0.24s; }
+  .navigation-grid > *:nth-child(5) { --card-delay: 0.32s; }
+  .navigation-grid > *:nth-child(6) { --card-delay: 0.4s; }
+  .navigation-grid > *:nth-child(7) { --card-delay: 0.48s; }
+  .navigation-grid > *:nth-child(8) { --card-delay: 0.56s; }
+  .navigation-grid > *:nth-child(9) { --card-delay: 0.64s; }
 </style>