CSS @keyframes: สร้าง Animation ด้วย Keyframes แบบฉบับสมบูรณ์

การสร้าง Animation ด้วย CSS ทำได้ง่ายโดยไม่ต้องใช้ Framework หรือ Plugin ภายนอก เครื่องมือสำคัญคือกฎ @keyframes ของ CSS

ไวยากรณ์ @keyframes

@keyframes เป็น CSS at-rule (กฎที่เริ่มด้วย @) ใช้กำหนดลำดับขั้นตอนของ Animation

รูปแบบพื้นฐาน (from/to)

@keyframes <name> {
  from { /* สถานะเริ่มต้น */ }
  to   { /* สถานะสิ้นสุด */ }
}

รูปแบบละเอียด (Percentage)

@keyframes <name> {
  0%   { }
  50%  { }
  100% { }
}

หมายเหตุ: เพื่อใช้ keyframe ที่สร้าง ต้องนำไปใช้เป็นค่าของ animation-name และตั้ง animation-duration ให้ระยะเวลา

ตัวอย่าง 1: Magic Ball (ลูกบอลลึกลับ)

สร้าง Animation เปลี่ยนสีพื้นหลังจาก limegreen เป็น blueviolet

@keyframes magic-ball {
  from { background-color: limegreen; }
  to   { background-color: blueviolet; }
}

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

ลูกบอลจะสลับสีไปมา (appear/disappear) ทุก 4 วินาที

ตัวอย่าง 2: Flash Sale (เอฟเฟกต์เลื่อนเข้ามา)

ใช้ Percentage ควบคุม Opacity และ Transform

@keyframes moveIn {
  0%   { opacity: 0; transform: translateY(3rem); }
  100% { opacity: 1; transform: translate(0); }
}

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

สี่เหลี่ยมจะโผล่มาจากด้านล่างพร้อมจางเข้ามา

สรุปและขั้นตอนต่อไป

• อ่าน CSS Animations documentation เพื่อเรียนรู้ sub-properties อื่นๆ เช่น animation-timing-function, animation-iteration-count, animation-direction ฯลฯ
• ไม่ใช่ CSS Property ทุกตัวที่ animate ได้ ดู รายการ property ที่ animate ได้

ลองทดลองสร้าง Animation ของตัวเองด้วย @keyframes ได้เลย!