Trang này được dịch bởi Cloud Translation API.

Ảnh động kích hoạt bằng thao tác cuộn CSS sắp ra mắt!

Bramus

Ngày xuất bản: 12/12/2025

Năm 2023, chúng tôi đã ra mắt ảnh động dựa trên thao tác cuộn. Nhờ đó, bạn có thể tiến (hoặc tua lại) một ảnh động thông qua thao tác cuộn. Với ảnh động dựa trên thao tác cuộn, tiến trình ảnh động sẽ tăng từ 0% lên 100% khi bạn cuộn. Nếu bạn ngừng cuộn, ảnh động sẽ tạm dừng; nếu bạn cuộn lên lại, ảnh động sẽ đảo ngược.

Chương tiếp theo cho ảnh động dựa trên thao tác cuộn sẽ ra mắt vào năm 2026, với ảnh động kích hoạt bằng thao tác cuộn sẽ có trong Chrome 145. Đây là những ảnh động dựa trên thời gian, sẽ kích hoạt khi vượt qua một khoảng cách cuộn cụ thể.

Bạn không cần dùng IntersectionObserver cho loại hiệu ứng này nữa, vì giờ đây bạn có thể khai báo hiệu ứng này trong CSS.

Điều kiện kích hoạt dòng thời gian, điều kiện kích hoạt ảnh động và hành động

Kích hoạt ảnh động

Để thiết lập ảnh động kích hoạt bằng thao tác cuộn trong CSS, hãy bắt đầu bằng một ảnh động CSS thông thường được đính kèm vào một phần tử:

animation: unclip 0.35s ease-in-out both;

Ảnh động này sử dụng DocumentTimeline làm trình điều khiển và chạy trong 0,35 giây. Ảnh động sẽ tự động kích hoạt sau khi tải trang. Để thay đổi điều kiện kích hoạt, hãy sử dụng thuộc tính CSS animation-trigger mới:

animation-trigger: --t play-forwards play-backwards;

Ở đây, ảnh động được đặt để kích hoạt bằng trình kích hoạt --t. Khi trình kích hoạt đó được kích hoạt, thao tác play-forwards sẽ được gọi trên ảnh động và khi trình kích hoạt bị huỷ kích hoạt, thao tác play-backwards sẽ được gọi.

Quy cách này có danh sách đầy đủ các thao tác.

Tạo trình kích hoạt

Nhưng --tđiều kiện kích hoạt đó là gì? Đây là một điều kiện kích hoạt có tên --t. Cụ thể đối với ảnh động kích hoạt bằng thao tác cuộn, đó là "trình kích hoạt dòng thời gian" sử dụng Dòng thời gian tiến trình cuộn hoặc Dòng thời gian tiến trình xem làm nguồn.

Để xác định một điều kiện kích hoạt dòng thời gian, hãy sử dụng thuộc tính timeline-trigger (hoặc các thuộc tính tương ứng). Ví dụ: để tạo một trình kích hoạt có tên --t sử dụng dòng thời gian của khung hiển thị làm nguồn, hãy sử dụng như sau:

timeline-trigger-name: --t;
timeline-trigger-source: view();

Trình kích hoạt --t đã tạo này sẽ kích hoạt và huỷ kích hoạt dựa trên dòng thời gian của khung hiển thị được liên kết với phần tử trùng khớp. Vì phạm vi mặc định cho dòng thời gian của khung hiển thị là phạm vi cover, nên điều kiện kích hoạt cũng sẽ kích hoạt và huỷ kích hoạt khi nằm trong hoặc ngoài phạm vi đó.

Điều chỉnh phạm vi của điều kiện kích hoạt

Để điều chỉnh vị trí khi trình kích hoạt phải hoạt động hoặc không hoạt động, hãy chỉ định phạm vi kích hoạt và phạm vi hoạt động trên trình kích hoạt. Trong ví dụ sau, phạm vi kích hoạt được đặt thành entry 100% exit 0%, tức là điều kiện kích hoạt sẽ kích hoạt khi đối tượng nằm trong phạm vi đó.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Vì không có dải ô đang hoạt động nào được chỉ định trong đoạn mã trước đó, nên dải ô kích hoạt cũng được dùng làm dải ô đang hoạt động. Khi nằm ngoài phạm vi hoạt động đó, trình kích hoạt sẽ bị huỷ kích hoạt.

Khi kết hợp với animation-trigger đã xác định, điều này sẽ dẫn đến việc ảnh động phát theo hướng tiến khi đối tượng đã hoàn toàn đi vào cổng cuộn và ảnh động phát theo hướng lùi khi đối tượng sắp rời khỏi cổng cuộn.

Bản ghi một bản minh hoạ với phạm vi điều kiện kích hoạt được đặt thành entry 100% exit 0%.
Bản minh hoạ này cũng cho thấy các dòng gỡ lỗi để cho biết phạm vi bắt đầu và kết thúc.

Bạn có thể có các phạm vi kích hoạt và hoạt động khác nhau. Ví dụ:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

Ở đây, trình kích hoạt sẽ kích hoạt khi chủ thể nằm trong phạm vi entry 100% exit 0%. Điều kiện kích hoạt vẫn hoạt động cho đến khi rời khỏi phạm vi entry 0% exit 100%.

Về mặt hình ảnh, điều này dẫn đến việc ảnh động phát theo hướng tiến khi đối tượng đi vào cổng cuộn và không giống như trước đây, ảnh động sẽ vẫn hoạt động cho đến khi đối tượng rời khỏi cổng cuộn hoàn toàn.

Bản ghi bản minh hoạ với phạm vi điều kiện kích hoạt được đặt thành entry 100% exit 0% / entry 0% exit 100%.
Bản minh hoạ cũng cho thấy các dòng gỡ lỗi để cho biết phạm vi bắt đầu và kết thúc. Phạm vi hoạt động bao quanh scrollport, nên các dòng gỡ lỗi của phạm vi này không xuất hiện.

Giới hạn phạm vi của điều kiện kích hoạt

Điều kiện kích hoạt hiển thị trên toàn cầu, tức là điều kiện kích hoạt trùng khớp cuối cùng khai báo một điều kiện kích hoạt có tên nhất định sẽ "thắng". Để hạn chế khả năng hiển thị của một điều kiện kích hoạt, hãy sử dụng thuộc tính trigger-scope. Điều này tương tự như cách sử dụng anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

Khi có một quy tắc CSS khai báo một điều kiện kích hoạt và khớp với nhiều phần tử, bạn cần sử dụng trigger-scope.

Bản minh hoạ

Trong bản minh hoạ sau đây, một biểu mẫu được chia thành nhiều phần có chiều cao đầy đủ. Khi mỗi phần của biểu mẫu xuất hiện, phần đó sẽ tạo ảnh động bằng ảnh động được kích hoạt bằng thao tác cuộn. Khi rời khỏi scrollport, thành phần này sẽ chuyển động ra ngoài.

Logic ảnh động kích hoạt bằng thao tác cuộn cho thành phần này là:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Mã này có nội dung như sau:

timeline-trigger có tên là --t với tập hợp nguồn được đặt thành một dòng thời gian của khung hiển thị theo dõi phần tử được so khớp.
Phạm vi kích hoạt của điều kiện kích hoạt là contain 15% contain 85%. Khi đối tượng nằm trong phạm vi đó, trình kích hoạt sẽ hoạt động.
Khi được kích hoạt, điều kiện kích hoạt sẽ vẫn hoạt động miễn là đối tượng nằm trong phạm vi hoạt động của entry 100% exit 0%.
Ảnh động unclip được đính kèm vào phần tử.
Ảnh động được thiết lập để dùng --t làm nguồn kích hoạt. Khi điều kiện kích hoạt trở nên chủ động, ảnh động sẽ bắt đầu phát theo hướng tiến.
Khi trình kích hoạt ngừng hoạt động (khi đối tượng rời khỏi phạm vi hoạt động), ảnh động sẽ phát ngược.
Nội dung của thẻ cũng có hiệu ứng ảnh động xuất hiện và biến mất bằng cách sử dụng cùng một sự kiện kích hoạt --t.

Ví dụ này có một phương thức dự phòng sử dụng IntersectionObserver cho những trình duyệt không hỗ trợ timeline-trigger.

Các bản minh hoạ khác

Nếu bạn muốn xem thêm ảnh động kích hoạt bằng thao tác cuộn, hãy xem các bản minh hoạ sau:

Bản ghi hình của bản minh hoạ "Meet the Monsters".

Phản hồi

Chúng tôi rất mong nhận được ý kiến phản hồi để tiếp tục cải thiện tính năng này. Hãy liên hệ với chúng tôi trên mạng xã hội hoặc báo cáo vấn đề tại Nhóm công tác CSS để gửi ý kiến phản hồi.

Nếu bạn gặp phải lỗi, hãy gửi thông báo lỗi cho Chromium để cho chúng tôi biết. Danh sách các lỗi đã biết: xem Trình theo dõi lỗi của Chromium.