CSS keyframe animation ทำงานอย่างไร?

Question

Accepted Answer

ในขณะที่ transition เคลื่อนไหว *ระหว่างสองสถานะ* แต่ **`@keyframes` animation** กำหนดลำดับหลายขั้นตอนที่สามารถรันได้โดยอัตโนมัติ วนซ้ำ และเคลื่อนผ่านสถานะกลางหลาย ๆ สถานะได้

## การกำหนดและการนำ animation ไปใช้

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## Keyframe หลายขั้นตอนด้วยเปอร์เซ็นต์

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

เปอร์เซ็นต์ช่วยให้คุณกำหนดลำดับขั้นตอนหลายช่วงในหนึ่ง animation ได้ ซึ่งเป็นสิ่งที่เป็นไปไม่ได้ด้วย transition ธรรมดา

## รูปย่อแบบเต็มของ animation

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

คุณสมบัติอื่น ๆ: `animation-delay`, `animation-direction: alternate` (ไป-กลับ), `animation-fill-mode: forwards` (คงสถานะสุดท้ายไว้), `animation-play-state: paused`

## ประสิทธิภาพ — ทำ animation เฉพาะ transform/opacity เท่านั้น

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

Keyframe animation รันในทุกเฟรม ดังนั้นการทำ animation กับคุณสมบัติที่กระตุ้นการคำนวณ layout จึงสิ้นเปลืองกว่าการทำ animation กับ `transform`/`opacity` อย่างมาก

## การเข้าถึง (Accessibility)

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## ทำไมจึงสำคัญ

Keyframe animation ขับเคลื่อน loader, สัญญาณดึงดูดความสนใจ, การเข้าฉาก และเอฟเฟกต์ที่วนซ้ำซึ่ง transition ไม่สามารถแสดงได้ (หลายขั้นตอน, รันอัตโนมัติ, วนไม่สิ้นสุด)

การรู้จักรูปย่อ การยึดติดกับ `transform`/`opacity` เพื่อความลื่นไหล และการเคารพ `prefers-reduced-motion` ช่วยให้คุณสร้างการเคลื่อนไหวที่สมบูรณ์ซึ่งยังคงมีประสิทธิภาพและเข้าถึงได้