คู่มือสร้าง Scroll-driven Animation ด้วย CSS ล้วน

• สามารถสร้าง แอนิเมชันที่ทำงานสัมพันธ์กับการเลื่อน ได้ด้วย CSS ล้วน โดยไม่ต้องใช้ JS หรือไลบรารีเพิ่มเติม
• ใช้พร็อพเพอร์ตี CSS อย่าง animation-timeline: scroll() / view() เพื่อให้แอนิเมชันดำเนินไปตามตำแหน่งการเลื่อนหรือการเข้าสู่ viewport
• พร็อพเพอร์ตี animation-range ช่วยกำหนดได้ละเอียดว่าแอนิเมชันจะเริ่ม/จบในช่วงใดของ viewport
• แนะนำให้ใช้ media query prefers-reduced-motion เพื่อรองรับผู้ใช้ที่ไวต่อการเคลื่อนไหว
• เริ่มรองรับตั้งแต่ Safari 26 beta ทำให้การใช้งาน แอนิเมชันเลื่อนหน้าจอแบบ CSS กว้างขึ้นมาก

---

องค์ประกอบ 3 อย่างของแอนิเมชันที่ขับเคลื่อนด้วยการเลื่อน

• Target: องค์ประกอบเป้าหมายที่จะใส่แอนิเมชัน (เช่น progress bar, image เป็นต้น)
• Keyframes: กำหนดว่าจะเกิดการเปลี่ยนแปลงอะไรตามการเลื่อน (เหมือนกับ CSS @keyframes เดิม)
• Timeline: กำหนดว่าแอนิเมชันจะเกิดขึ้นเมื่อไรและอย่างไร (อิงการเลื่อน/มุมมอง แทนการอิงเวลา)

Timeline ใน CSS

• โดยปกติ CSS animation แบบเดิมจะใช้ document timeline (อิงเวลา)
• มีการเพิ่มพร็อพเพอร์ตี animation-timeline (CSS Animations Level 2, ปี 2023) ทำให้แอนิเมชันสามารถดำเนินไปตามเกณฑ์อื่นนอกเหนือจากเวลาได้ เช่น การเลื่อน, การเข้าสู่ viewport

timeline แบบ scroll()

• timeline แบบ scroll() จะทำให้แอนิเมชันเดินหน้าเฉพาะตอนที่ผู้ใช้เลื่อนหน้าจอ
• ตัวอย่าง: progress bar ด้านล่างค่อย ๆ เติมจากซ้ายไปขวาตามการเลื่อน

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline ต้องประกาศหลังพร็อพเพอร์ตี animation จึงจะทำงานได้ถูกต้อง

การคำนึงถึง accessibility ด้าน motion

• แนะนำให้ใช้ media query prefers-reduced-motion เพื่อปกป้องผู้ใช้ที่ไวต่อ motion

  @media not (prefers-reduced-motion) {  
      /* 애니메이션 코드 */  
  }  
  

timeline แบบ view()

• timeline แบบ view() จะเริ่มแอนิเมชันเมื่อองค์ประกอบเป้าหมาย ปรากฏใน viewport
• ตัวอย่าง: เมื่อเลื่อนแล้วรูปภาพสไลด์เข้ามาจากด้านขวาพร้อมเฟดอิน

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

ควบคุมช่วงการทำงานด้วย animation-range

• โดยปกติ animation-range จะอยู่ที่ 0% (เริ่มเข้า viewport)~100% (ออกไปหมดแล้ว)

• ตัวอย่าง: ให้แอนิเมชันทำงานถึงแค่ช่วง 50% ของ viewport

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• ควรกำหนดค่า range ให้เหมาะสมเพื่อประสบการณ์ใช้งานที่ดี

• หากคำนึงถึง accessibility ด้าน motion ให้ใช้ร่วมกับ prefers-reduced-motion

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

การประยุกต์ใช้ขั้นสูงและขั้นถัดไป

• scroll(), view() เป็นฟังก์ชันที่สามารถระบุออปชันได้หลากหลาย เช่น scroller element (ค่าเริ่มต้น: nearest) หรือแกน (block, inline, x, y)
• ใช้ animation-range, entry/exit เพื่อสร้าง UX ที่ละเอียดอ่อนยิ่งขึ้นได้
• เบราว์เซอร์รุ่นใหม่อย่าง Safari 26 beta เริ่มรองรับก่อน และคาดว่าจะค่อย ๆ มีการทำให้เป็นมาตรฐานและรองรับกว้างขึ้นต่อไป

[shakespeare]

ดูเหมือนว่าจะทำได้ด้วย animation-timeline อย่างเดียวเลยนะ น่าทึ่งมาก!