เอฟเฟกต์แอนิเมชันใน CSS: สร้างการเคลื่อนไหวแบบไดนามิกบนเว็บ

ทำความเข้าใจ CSS Animation

แอนิเมชัน (Animation) คือกระบวนการสร้างเอฟเฟกต์การเคลื่อนไหวและเปลี่ยนแปลงลักษณะขององค์ประกอบบนหน้าเว็บ CSS รองรับเอฟเฟกต์แอนิเมชันหลากหลายรูปแบบเพื่อควบคุมการเคลื่อนไหวของอีเวนต์ต่างๆ

บทบาทของ Keyframes

ภายใต้แนวคิดของ Animation แล้ว Keyframes เป็นกลไกสำคัญที่ใช้ควบคุมขั้นตอนระหว่างกลาง (intermediate steps) ของแอนิเมชันใน CSS3 Keyframes ช่วยให้เรากำหนดสถานะเริ่มต้น สถานะสิ้นสุด และจุดกลางต่างๆ ของแอนิเมชันได้อย่างละเอียด

ตัวอย่างไวยากรณ์ (Syntax) พื้นฐาน

ตัวอย่างต่อไปนี้แสดงการกำหนดความสูง ความกว้าง สี ชื่อแอนิเมชัน และระยะเวลา พร้อมไวยากรณ์ Keyframes:

@keyframes animation {
  from { background-color: pink; }
  to { background-color: green; }
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
}

คำอธิบายโค้ด

• @keyframes animation — กำหนดชื่อชุด keyframes ว่า "animation"
• from / to — จุดเริ่มต้น (0%) และจุดสิ้นสุด (100%) ของแอนิเมชัน
• animation-name — เชื่อมโยง element กับ keyframes ที่สร้างไว้
• animation-duration — ระยะเวลาที่แอนิเมชันใช้ในการทำงานหนึ่งรอบ (5 วินาที)

ขยายความสามารถด้วย Keyframes แบบละเอียด

นอกจาก from และ to แล้ว ยังสามารถใช้เปอร์เซ็นต์เพื่อควบคุมขั้นตอนกลางได้:

@keyframes slide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(100px); background: blue; }
  100% { transform: translateX(0); }
}

เทคนิคนี้ช่วยสร้างแอนิเมชันที่ซับซ้อนและน่าสนใจมากขึ้น เช่น การกระโดด การหมุน หรือการเปลี่ยนสีแบบขั้นตอน