css animation+transform
CSS Animation คือ ฟีเจอร์ใน CSS ที่ให้คุณสร้างภาพเคลื่อนไหวหรือการเปลี่ยนแปลงของเอลิเมนต์บนเว็บเพจได้อย่างราบรื่นและมีขั้นตอน โดยใช้ชุดคำสั่งที่เรียกว่า Keyframes ในการกำหนดสถานะต่างๆ ของเอลิเมนต์ และใช้ property แอนิเมชัน ใน การควบคุมวิธีการเล่น การเคลื่อนไหว การเปลี่ยนสี หรือการปรับขนาดของเอลิเมนต์ โดยไม่ต้องใช้ JavaScript เพิ่มเติม.
ส่วนประกอบหลักของ CSS Animation
1. @keyframes:
เป็นชุดคำสั่งที่ใช้กำหนด เฟรม หรือ ขั้นตอนต่างๆ ของแอนิเมชัน โดยระบุว่าเอลิเมนต์จะเปลี่ยนสถานะ (เช่น ตำแหน่ง, สี, ขนาด, ความโปร่งใส) อย่างไรในช่วงเวลาที่กำหนด.
2. Properties แอนิเมชัน:
ใช้เพื่อกำหนดว่าจะให้ @keyframes ที่สร้างไว้ทำงานกับเอลิเมนต์ใด และจะเล่นอย่างไร. คุณสมบัติที่สำคัญได้แก่:
animation-name: กำหนดชื่อของ Keyframes ที่จะนำมาใช้.
animation-duration: กำหนดระยะเวลาทั้งหมดของหนึ่งรอบแอนิเมชัน (เช่น 2 วินาที หรือ 500 มิลลิวินาที).
animation-timing-function: กำหนดอัตราเร่งหรือความเร็วของการเปลี่ยนสถานะระหว่างเฟรม (เช่น Linear, Ease).
animation-delay: กำหนดระยะเวลาหน่วงก่อนที่แอนิเมชันจะเริ่มทำงาน.
animation-iteration-count: กำหนดจำนวนครั้งที่แอนิเมชันจะทำซ้ำ.
animation-direction: กำหนดทิศทางการเล่นแอนิเมชัน (เช่น เล่นไปข้างหน้า, ถอยหลัง, สลับไปมา).
animation-fill-mode: กำหนดว่าเอลิเมนต์จะคงสถานะสุดท้ายของแอนิเมชันไว้หรือไม่.
ประโยชน์และข้อดีของ CSS Animation
สร้างความน่าสนใจ:
ทำให้เว็บไซต์ดูมีชีวิตชีวาและน่าสนใจยิ่งขึ้น.
ประสิทธิภาพ:
มีน้ำหนักเบาและทำงานได้ดีกับ CPU ทำให้เว็บไซต์โหลดเร็วและมีประสิทธิภาพ.
ควบคุมได้ง่าย:
คุณสามารถสร้างเอฟเฟกต์การเคลื่อนไหวที่ซับซ้อนได้ง่ายกว่าเมื่อเทียบกับการใช้ JavaScript.
ไม่ต้องใช้ JavaScript:
สำหรับงานแอนิเมชันส่วนใหญ่ คุณสามารถสร้างได้ด้วย CSS เพียงอย่างเดียว.
CSS Animation เหมาะอย่างยิ่งสำหรับงานต่างๆ เช่น การทำเอฟเฟกต์ Hover, การเน้นข้อความ, การสร้างสไลด์โชว์ หรือการเคลื่อนไหวของส่วนประกอบต่างๆ บนเว็บเพจ.
ถ้าคุณกำลังหา “css animations tutorial” แบบเริ่มจากศูนย์ ฉันแนะนำให้โฟกัส 2 อย่างก่อนเลย: 1) @keyframes และ 2) การใช้ transform ร่วมกับ animation เพราะ transform เป็นตัวที่ทำให้การเคลื่อนไหวลื่นมาก (ย้ายตำแหน่ง/ย่อ-ขยาย/หมุน) โดยไม่ต้องพึ่ง JavaScript ตัวอย่างที่ฉันชอบใช้ฝึกคือ “เด้งกลับไปสู่รูปแบบเดิม” (เหมือนยืดแล้วคืนตัว) ซึ่งทำได้ด้วย scale + timing-function แบบง่ายๆ: 1) สร้าง keyframes - 0%: scale(1) - 50%: scale(1.15) - 100%: scale(1) เพื่อให้กลับไปสู่รูปแบบเดิม 2) ผูกกับ element - ตั้ง animation-duration เช่น 600ms - ใช้ animation-timing-function: ease-in-out จะได้ความรู้สึกธรรมชาติ - ถ้าอยากให้ “วนเรียนตลอดไป” ก็ใส่ animation-iteration-count: infinite ทริคที่เจอว่าช่วยมาก: - ถ้าต้องการให้เริ่มช้าแล้วเร็ว หรือเร็วแล้วช้า ลองสลับ timing-function ระหว่าง ease, ease-in, ease-out, linear (เริ่มจาก ease-in-out ก่อน ปลอดภัยสุด) - ถ้าอยากให้มันสลับไปมาแบบไป-กลับ (เด้งกลับ) ใช้ animation-direction: alternate จะช่วยลดการเขียน keyframes ซ้ำ - ถ้าคุณอยากให้จบแล้วค้างที่เฟรมสุดท้าย (ไม่กลับ) ใช้ animation-fill-mode: forwards แต่ถ้าเป้าหมายคือ “กลับไปสู่รูปแบบเดิม” ให้ปล่อยค่า default หรือกำหนด keyframes ให้กลับมาที่ 100% เปรียบเทียบแบบคนทำเว็บ: “CSS animation” vs “Postman” หลายคนเสิร์ชคำว่า “postman vs css animations” แล้วงง เพราะมันคนละโลกกันเลย: Postman คือเครื่องมือทดสอบ API (ส่ง request/ดู response) ส่วน CSS Animations คือทำเอฟเฟกต์ภาพเคลื่อนไหวบนหน้าเว็บ ถ้าคุณกำลังทำเว็บแอปจริงๆ มักจะใช้ทั้งคู่ร่วมกัน: Postman ไว้เช็ค API และ CSS animation ไว้ทำให้ UI ดูไหลลื่น เช่น ปุ่มโหลด, skeleton, hover effect เสริมสำหรับคนออกแบบที่เจอคำว่า “Scale strokes & effects (Figma) checkbox” ถ้าคุณออกแบบใน Figma แล้ว export มาใช้บนเว็บ บางครั้งขนาดเส้น/เอฟเฟกต์อาจย่อ-ขยายตามการ scale ทำให้ตอนเอาไปทำ CSS transform: scale() แล้วความหนาดูไม่เท่าที่คิด ใน Figma จะมีตัวเลือก “Scale strokes & effects” เพื่อกำหนดว่าจะให้ stroke/เอฟเฟกต์ถูกสเกลไปด้วยไหม - ถ้าต้องการให้ไอคอน/เส้นคมเท่าเดิมตอนปรับขนาด อาจปิดไว้ - ถ้าต้องการให้ทุกอย่างโตไปพร้อมกัน เปิดไว้ สุดท้าย ถ้าจะทำแอนิเมชันให้ลื่นจริงๆ ฉันจะพยายามใช้ transform และ opacity เป็นหลัก (เช่น translate/scale/rotate + fade) เพราะมักทำงานได้ดีและไม่หน่วง ช่วยให้เว็บดูโปรขึ้นแบบง่ายมาก
