feat: 丰富并放慢滚动动画

oneinai.html

@@ -388,10 +388,24 @@
   }
 
   .section {
+    position: relative;
     padding: clamp(56px, 7vw, 88px) 0;
     border-bottom: 1px solid var(--line);
   }
 
+  .section::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
+    transform: scaleX(1);
+    transform-origin: left;
+    pointer-events: none;
+  }
+
   .section-heading {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
@@ -750,6 +764,28 @@
     }
   }
 
+  @keyframes hero-copy-scroll {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    to {
+      opacity: 0.18;
+      transform: translate3d(-76px, -84px, 0) scale(0.95);
+    }
+  }
+
+  @keyframes hero-proof-scroll {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    to {
+      opacity: 0.2;
+      transform: translate3d(72px, -44px, 0) scale(0.93);
+    }
+  }
+
   @keyframes scroll-reveal {
     from {
       opacity: 0;
@@ -796,6 +832,28 @@
     }
   }
 
+  @keyframes detail-rise {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 32px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes tag-reveal {
+    from {
+      opacity: 0;
+      transform: translate3d(-28px, 0, 0) scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
   @keyframes reveal-from-left {
     from {
       opacity: 0;
@@ -867,14 +925,36 @@
 
   @supports (animation-timeline: view()) {
     .scroll-progress::after {
-      animation: page-progress linear both;
+      animation: page-progress 1s linear both;
       animation-timeline: scroll(root);
     }
 
-    .reveal-on-scroll {
+    .hero-copy {
-      animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation:
+        rise-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
+        hero-copy-scroll 1s linear both;
+      animation-timeline: auto, view();
+      animation-range: normal, exit 0% exit 100%;
+    }
+
+    .hero-proof {
+      animation:
+        rise-in 720ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
+        hero-proof-scroll 1s linear both;
+      animation-timeline: auto, view();
+      animation-range: normal, exit 0% exit 100%;
+    }
+
+    .section::after {
+      animation: line-draw 1s linear both;
       animation-timeline: view();
-      animation-range: entry 25% entry 100%;
+      animation-range: cover 55% cover 80%;
+    }
+
+    .reveal-on-scroll {
+      animation: scroll-reveal 1s linear both;
+      animation-timeline: view();
+      animation-range: entry 25% cover 50%;
     }
 
     .section-heading.reveal-on-scroll {
@@ -882,105 +962,183 @@
     }
 
     .section-heading .section-kicker {
-      animation: kicker-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: kicker-reveal 1s linear both;
       animation-timeline: view();
-      animation-range: entry 25% entry 90%;
+      animation-range: entry 25% cover 32%;
     }
 
     .section-heading .section-title {
-      animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: title-reveal 1s linear both;
       animation-timeline: view();
-      animation-range: entry 32% contain 6%;
+      animation-range: entry 35% cover 48%;
     }
 
     .section-heading .section-description {
-      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: reveal-from-right 1s linear both;
       animation-timeline: view();
-      animation-range: entry 48% contain 14%;
+      animation-range: entry 50% cover 58%;
     }
 
     .capability-row:nth-child(1) {
       animation-name: reveal-from-left;
-      animation-range: entry 12% entry 100%;
+      animation-range: entry 20% cover 45%;
     }
 
     .capability-row:nth-child(2) {
-      animation-range: entry 35% contain 10%;
+      animation-range: entry 40% cover 54%;
     }
 
     .capability-row:nth-child(3) {
       animation-name: reveal-from-right-card;
-      animation-range: entry 58% contain 20%;
+      animation-range: entry 60% cover 63%;
+    }
+
+    .capability-row .row-index,
+    .capability-row .row-title,
+    .capability-row .row-detail,
+    .capability-row .row-tag {
+      animation: detail-rise 1s linear both;
+      animation-timeline: view();
+    }
+
+    .capability-row .row-index {
+      animation-range: entry 20% cover 30%;
+    }
+
+    .capability-row .row-title {
+      animation-range: entry 35% cover 38%;
+    }
+
+    .capability-row .row-detail {
+      animation-range: entry 45% cover 48%;
+    }
+
+    .capability-row .row-tag {
+      animation-name: tag-reveal;
+      animation-range: entry 55% cover 58%;
     }
 
     .workflow-list::before {
-      animation: line-draw linear both;
+      animation: line-draw 1s linear both;
       animation-timeline: view();
-      animation-range: entry 20% contain 40%;
+      animation-range: entry 25% cover 75%;
     }
 
     .workflow-step::before {
-      animation: line-draw linear both;
+      animation: line-draw 1s linear both;
       animation-timeline: view();
-      animation-range: entry 35% contain 20%;
+      animation-range: entry 35% cover 55%;
       transform-origin: left;
     }
 
     .workflow-step:nth-child(1) {
-      animation-range: entry 12% entry 100%;
+      animation-range: entry 20% cover 45%;
     }
 
     .workflow-step:nth-child(2) {
-      animation-range: entry 35% contain 10%;
+      animation-range: entry 40% cover 54%;
     }
 
     .workflow-step:nth-child(3) {
-      animation-range: entry 58% contain 20%;
+      animation-range: entry 60% cover 63%;
+    }
+
+    .workflow-step .workflow-index,
+    .workflow-step .workflow-title,
+    .workflow-step .workflow-detail,
+    .workflow-step .workflow-meta {
+      animation: detail-rise 1s linear both;
+      animation-timeline: view();
+    }
+
+    .workflow-step .workflow-index {
+      animation-range: entry 25% cover 32%;
+    }
+
+    .workflow-step .workflow-title {
+      animation-range: entry 35% cover 42%;
+    }
+
+    .workflow-step .workflow-detail {
+      animation-range: entry 45% cover 52%;
+    }
+
+    .workflow-step .workflow-meta {
+      animation-name: tag-reveal;
+      animation-range: entry 60% cover 62%;
     }
 
     .pricing-layout {
       animation-name: panel-unfold;
-      animation-range: entry 28% contain 12%;
+      animation-range: entry 25% cover 60%;
+    }
+
+    .price-label,
+    .price-note {
+      animation: detail-rise 1s linear both;
+      animation-timeline: view();
+    }
+
+    .price-label {
+      animation-range: entry 25% cover 35%;
     }
 
     .price-main {
-      animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: number-rise 1s linear both;
       animation-timeline: view();
-      animation-range: entry 52% contain 18%;
+      animation-range: entry 40% cover 50%;
+    }
+
+    .price-note {
+      animation-range: entry 50% cover 58%;
     }
 
     .price-fact {
-      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: reveal-from-right 1s linear both;
       animation-timeline: view();
     }
 
     .price-fact:nth-child(1) {
-      animation-range: entry 38% entry 100%;
+      animation-range: entry 35% cover 46%;
     }
 
     .price-fact:nth-child(2) {
-      animation-range: entry 52% contain 10%;
+      animation-range: entry 50% cover 57%;
     }
 
     .price-fact:nth-child(3) {
-      animation-range: entry 66% contain 18%;
+      animation-range: entry 65% cover 68%;
     }
 
     .docs-panel {
       animation-name: panel-unfold;
-      animation-range: entry 30% contain 12%;
+      animation-range: entry 25% cover 62%;
+    }
+
+    .docs-panel .section-kicker,
+    .docs-panel .section-description {
+      animation: detail-rise 1s linear both;
+      animation-timeline: view();
+    }
+
+    .docs-panel .section-kicker {
+      animation-range: entry 30% cover 38%;
     }
 
     .docs-panel .section-title {
-      animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: title-reveal 1s linear both;
       animation-timeline: view();
-      animation-range: entry 48% contain 16%;
+      animation-range: entry 40% cover 52%;
+    }
+
+    .docs-panel .section-description {
+      animation-range: entry 52% cover 60%;
     }
 
     .doc-link {
-      animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+      animation: reveal-from-right 1s linear both;
       animation-timeline: view();
-      animation-range: entry 62% contain 22%;
+      animation-range: entry 65% cover 72%;
     }
 
   }
@@ -1210,14 +1368,29 @@
     }
 
     .reveal-on-scroll,
+    .hero-copy,
+    .hero-proof,
+    .section::after,
     .section-heading .section-kicker,
     .section-heading .section-title,
     .section-heading .section-description,
+    .capability-row .row-index,
+    .capability-row .row-title,
+    .capability-row .row-detail,
+    .capability-row .row-tag,
     .workflow-list::before,
     .workflow-step::before,
+    .workflow-step .workflow-index,
+    .workflow-step .workflow-title,
+    .workflow-step .workflow-detail,
+    .workflow-step .workflow-meta,
+    .price-label,
     .price-main,
+    .price-note,
     .price-fact,
+    .docs-panel .section-kicker,
     .docs-panel .section-title,
+    .docs-panel .section-description,
     .doc-link {
       opacity: 1 !important;
       clip-path: none !important;