ภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อน CSS จะพร้อมใช้งานเร็วๆ นี้

Bramus

เผยแพร่: 12 ธ.ค. 2025

ในปี 2023 เราได้เปิดตัวภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ซึ่งช่วยให้คุณเลื่อนไปข้างหน้า (หรือกรอกลับ) ภาพเคลื่อนไหวผ่านการเลื่อนได้ เมื่อใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ความคืบหน้าของภาพเคลื่อนไหวจะเพิ่มขึ้นจาก 0% เป็น 100% ขณะที่คุณเลื่อน หากหยุดเลื่อน ภาพเคลื่อนไหวจะหยุดชั่วคราว และหากเลื่อนกลับขึ้นไป ภาพเคลื่อนไหวจะย้อนกลับ

บทต่อไปของภาพเคลื่อนไหวตามการเลื่อนจะมาถึงในปี 2026 โดยภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อนจะพร้อมใช้งานใน Chrome 145 ภาพเคลื่อนไหวเหล่านี้เป็นภาพเคลื่อนไหวตามเวลาที่จะทริกเกอร์เมื่อเลื่อนผ่านออฟเซ็ตการเลื่อนที่เฉพาะเจาะจง

บอกลา IntersectionObserver สำหรับเอฟเฟกต์ประเภทนี้ได้เลย เพราะตอนนี้คุณทำได้แบบประกาศใน CSS แล้ว

ทริกเกอร์ไทม์ไลน์ ทริกเกอร์ภาพเคลื่อนไหว และการดำเนินการ

ทริกเกอร์ภาพเคลื่อนไหว

หากต้องการตั้งค่าภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อนใน CSS ให้เริ่มด้วยภาพเคลื่อนไหว CSS ปกติที่แนบกับองค์ประกอบ

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

ภาพเคลื่อนไหวนี้ใช้ DocumentTimeline เป็นตัวขับเคลื่อนและทำงานเป็นเวลา 0.35 วินาที ระบบจะทริกเกอร์ภาพเคลื่อนไหวโดยอัตโนมัติหลังจากโหลดหน้าเว็บ หากต้องการเปลี่ยนทริกเกอร์ ให้ใช้animation-triggerพร็อพเพอร์ตี้ CSS ใหม่ ดังนี้

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

ในที่นี้ ระบบตั้งค่าให้ทริกเกอร์ --t เป็นตัวเรียกใช้ภาพเคลื่อนไหว เมื่อทริกเกอร์เปิดใช้งาน ระบบจะเรียกใช้play-forwardsการดำเนินการกับภาพเคลื่อนไหว และเมื่อทริกเกอร์ปิดใช้งาน ระบบจะเรียกใช้play-backwardsการดำเนินการ

ข้อกำหนดมีรายการการดำเนินการทั้งหมด

สร้างทริกเกอร์

แต่--tทริกเกอร์--tนั้นคืออะไร ซึ่งเป็นทริกเกอร์ที่มีชื่อว่า --t สำหรับภาพเคลื่อนไหวที่ทริกเกอร์โดยการเลื่อนโดยเฉพาะ จะเป็น "ทริกเกอร์ไทม์ไลน์" ซึ่งใช้ไทม์ไลน์ความคืบหน้าในการเลื่อนหรือไทม์ไลน์ความคืบหน้าในการดูเป็นแหล่งที่มา

หากต้องการกำหนดทริกเกอร์ไทม์ไลน์ ให้ใช้พร็อพเพอร์ตี้ timeline-trigger (หรือรูปแบบยาวที่เกี่ยวข้อง) เช่น หากต้องการสร้างทริกเกอร์ชื่อ --t ที่ใช้ไทม์ไลน์ของมุมมองเป็นแหล่งที่มา ให้ใช้คำสั่งต่อไปนี้

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

ทริกเกอร์ที่สร้างขึ้นนี้ --t จะเปิดใช้งานและปิดใช้งานตามไทม์ไลน์การดูที่เชื่อมโยงกับองค์ประกอบที่ตรงกัน เนื่องจากช่วงเริ่มต้นของไทม์ไลน์การดูคือช่วงcover ทริกเกอร์จึงจะเปิดใช้งานและปิดใช้งานเมื่ออยู่ภายในหรือภายนอกช่วงนั้น

ปรับช่วงของทริกเกอร์

หากต้องการปรับตำแหน่งเมื่อควรเปิดหรือปิดใช้งานทริกเกอร์ ให้ระบุช่วงการเปิดใช้งานและช่วงที่ใช้งานอยู่ในทริกเกอร์ ในตัวอย่างต่อไปนี้ ช่วงการเปิดใช้งานตั้งค่าเป็น entry 100% exit 0% ซึ่งหมายความว่าทริกเกอร์จะเปิดใช้งานเมื่อวัตถุอยู่ภายในช่วงดังกล่าว

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

เนื่องจากไม่มีการระบุช่วงที่ใช้งานอยู่ในข้อมูลโค้ดก่อนหน้า ระบบจึงใช้ช่วงการเปิดใช้งานเป็นช่วงที่ใช้งานอยู่ด้วย เมื่ออยู่นอกช่วงที่ใช้งานอยู่ ระบบจะปิดใช้งานทริกเกอร์

เมื่อรวมกับ animation-trigger ที่กำหนดไว้แล้ว จะทำให้ภาพเคลื่อนไหวเล่นไปข้างหน้าเมื่อวัตถุเข้าสู่ Scrollport อย่างเต็มที่ และเล่นย้อนกลับเมื่อวัตถุกำลังจะออกจาก Scrollport

การบันทึกการสาธิตโดยตั้งค่าช่วงทริกเกอร์เป็น entry 100% exit 0%
การสาธิตยังแสดงบรรทัดการแก้ไขข้อบกพร่องเพื่อระบุจุดเริ่มต้นและจุดสิ้นสุดของช่วง

คุณอาจมีช่วงการเปิดใช้งานและช่วงที่ใช้งานอยู่แตกต่างกันได้ เช่น

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

ในที่นี้ ทริกเกอร์จะเปิดใช้งานเมื่อวัตถุอยู่ในช่วง entry 100% exit 0% ทริกเกอร์จะยังคงทำงานอยู่จนกว่าจะอยู่นอกช่วง entry 0% exit 100%

ในเชิงภาพ การดำเนินการนี้จะทำให้ภาพเคลื่อนไหวเล่นไปข้างหน้าเมื่อวัตถุเข้าสู่ Scrollport และจะยังคงทำงานอยู่จนกว่าวัตถุจะออกจาก Scrollport อย่างสมบูรณ์ ซึ่งแตกต่างจากก่อนหน้านี้

การบันทึกการสาธิตโดยตั้งค่าช่วงทริกเกอร์เป็น entry 100% exit 0% / entry 0% exit 100%
การสาธิตยังแสดงบรรทัดการแก้ไขข้อบกพร่องเพื่อระบุจุดเริ่มต้นและจุดสิ้นสุดของช่วง ช่วงที่ใช้งานอยู่ครอบคลุม Scrollport จึงมองไม่เห็นเส้นการแก้ไขข้อบกพร่อง

จำกัดขอบเขตของทริกเกอร์

ทริกเกอร์จะมองเห็นได้ทั่วโลก ซึ่งหมายความว่าการจับคู่ครั้งสุดท้ายที่ประกาศทริกเกอร์ที่มีชื่อหนึ่งๆ จะเป็น "ผู้ชนะ" หากต้องการจำกัดระดับการเข้าถึงทริกเกอร์ ให้ใช้พร็อพเพอร์ตี้ trigger-scope ซึ่งคล้ายกับวิธีใช้ anchor-scope

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

เมื่อมีกฎ CSS ที่ประกาศทริกเกอร์และตรงกับองค์ประกอบหลายรายการ คุณจะต้องใช้ trigger-scope

สาธิต

ในการสาธิตต่อไปนี้ ระบบจะแบ่งแบบฟอร์มออกเป็นส่วนต่างๆ ที่มีความสูงเต็ม เมื่อส่วนต่างๆ ของแบบฟอร์มปรากฏขึ้น ระบบจะใช้ภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อนเพื่อแสดงภาพเคลื่อนไหว เมื่อออกจาก Scrollport ระบบจะแสดงภาพเคลื่อนไหวออก

ตรรกะของภาพเคลื่อนไหวที่ทริกเกอร์โดยการเลื่อนสำหรับสิ่งนี้คือ

@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;
}

เมื่อแยกส่วนแล้ว โค้ดจะอ่านได้ดังนี้

  • timeline-trigger จะมีชื่อว่า --t โดยมีแหล่งที่มาที่ตั้งค่าเป็นไทม์ไลน์ของมุมมองที่ติดตามองค์ประกอบที่ตรงกัน
  • ช่วงการเปิดใช้งานของทริกเกอร์คือ contain 15% contain 85% เมื่อวัตถุอยู่ภายในช่วงดังกล่าว ทริกเกอร์จะทำงาน
  • เมื่อเปิดใช้งาน ทริกเกอร์จะยังคงทำงานตราบใดที่วัตถุอยู่ในช่วงที่ใช้งานได้ของ entry 100% exit 0%
  • ระบบจะแนบภาพเคลื่อนไหว unclip ไปกับองค์ประกอบ
  • ตั้งค่าภาพเคลื่อนไหวให้ใช้ --t เป็นแหล่งที่มาของทริกเกอร์ เมื่อทริกเกอร์ทำงาน ภาพเคลื่อนไหวจะเริ่มเล่นไปข้างหน้า
  • เมื่อทริกเกอร์ปิดใช้งาน (ซึ่งจะเกิดขึ้นเมื่อตัวแบบออกจากช่วงที่ใช้งานอยู่) ภาพเคลื่อนไหวจะเล่นย้อนกลับ
  • เนื้อหาของการ์ดจะเคลื่อนไหวเข้าและออกโดยใช้ทริกเกอร์ --t เดียวกัน

ตัวอย่างนี้มีฟอลแบ็กที่ใช้ IntersectionObserver สำหรับเบราว์เซอร์ที่ไม่รองรับ timeline-trigger

การสาธิตเพิ่มเติม

หากคุณยังไม่จุใจกับภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อน ให้ดูการสาธิตต่อไปนี้

การบันทึกการสาธิต "Meet the monsters"

ความคิดเห็น

เราอยากทราบความคิดเห็นเพื่อปรับปรุงฟีเจอร์นี้ต่อไป โปรดติดต่อเราบนโซเชียลมีเดียหรือยื่นปัญหาที่ CSS Working Group เพื่อแสดงความคิดเห็น

หากพบข้อบกพร่อง โปรดรายงานข้อบกพร่องของ Chromium เพื่อแจ้งให้เราทราบ รายการข้อบกพร่องที่ทราบ โปรดดูตัวติดตามข้อบกพร่องของ Chromium