CSS scroll-driven animations

Module CSS scroll-driven animations cung cấp chức năng xây dựng trên module CSS animations và Web Animations API. Nó cho phép bạn animate các giá trị thuộc tính theo timeline dựa trên cuộn thay vì timeline tài liệu dựa trên thời gian mặc định. Điều này có nghĩa là bạn có thể animate một phần tử bằng cách cuộn phần tử đó, scroll container của nó, hoặc phần tử gốc của nó, thay vì chỉ bằng sự trôi qua của thời gian.

Scroll-driven animations hoạt động

Bạn có thể xác định scroller kiểm soát animation bằng cách đặt tên animation hoặc dùng hàm scroll().

<main>
  <div></div>
</main>

css

main {
  scroll-timeline: --main-timeline;
}

div {
  animation: background-animation linear;
  animation-timeline: scroll(nearest inline);
}

div::after {
  animation: shape-animation linear;
  animation-timeline: --main-timeline;
}

@layer animations {
  @keyframes background-animation {
    0% {
      background-color: palegoldenrod;
    }
    100% {
      background-color: magenta;
    }
  }
  @keyframes shape-animation {
    0% {
      left: 0;
      top: 0;
      background-color: black;
    }
    50% {
      top: calc(100% - var(--elSize));
      left: calc(50% - var(--elSize));
      background-color: red;
    }
    100% {
      left: calc(100vw - var(--elSize));
      top: 0;
      rotate: 1800deg;
      background-color: white;
    }
  }
}

@layer page-setup {
  :root {
    --elSize: 50px;
  }
  main {
    height: 90vh;
    overflow: scroll;
    border: 1px solid;
    margin: 5vh auto;
  }
  div {
    height: 400vh;
    width: 400vw;
  }
  div::after {
    content: "";
    border: 1px solid red;
    height: var(--elSize);
    width: var(--elSize);
    position: absolute;
    border-radius: 20px;
    corner-shape: superellipse(-4);
  }
}

@layer no-support {
  @supports not (scroll-timeline: --main-timeline) {
    body::before {
      content: "Your browser doesn't support scroll-driven animations.";
      background-color: wheat;
      display: block;
      text-align: center;
    }
  }
}

Cuộn phần tử theo chiều inline để xem màu nền thay đổi. Cuộn dọc để xem nội dung được tạo ra di chuyển, xoay và thay đổi màu sắc.

Tham chiếu

Thuộc tính

Shorthand animation-range
- animation-range-end
- animation-range-start
Shorthand scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
timeline-scope
Shorthand view-timeline

Scroll-driven animation timelines: Scroll-driven animation timeline và cách tạo scroll-driven animation.
Timeline range names: Kiểu dữ liệu <timeline-range-name>: Hiểu các tên timeline range khác nhau.