CSS Scroll Timeline Fade

<div class="cstf-wrap">
  <div style="height:80vh;"></div>
  <div class="cstf-section">
    <h2>Scroll-Driven</h2>
    <p>Pure CSS scroll animation</p>
  </div>
  <div style="height:100vh;"></div>
</div>

body { padding: 0 !important; }
.cstf-wrap { width: 100%; }
.cstf-section {
  padding: 48px;
  background: #1e293b;
  border-radius: 20px;
  color: #e2e8f0;
  text-align: center;
  margin: 0 20px;
  animation: cstf-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}
@keyframes cstf-reveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.cstf-section h2 { margin: 0 0 8px; font-size: 28px; }
.cstf-section p { margin: 0; font-size: 14px; opacity: 0.6; }