CSS Transitions ทำงานอย่างไร

Question

Accepted Answer

**Transition** ทำให้ property เปลี่ยนจากค่าเดิมไปยังค่าใหม่ได้อย่างนุ่มนวล ในช่วงเวลาหนึ่ง แทนที่จะเปลี่ยนแบบทันที คุณประกาศว่า *อะไร* ที่ต้องทำให้เคลื่อนไหว และ *นานเท่าไร* แล้วทำให้เกิดขึ้นโดยการเปลี่ยน property (มักจะผ่าน `:hover` หรือ class)

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## สี่ส่วนของ shorthand

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## ทำให้ properties หลายตัวเคลื่อนไหว

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

ระบุแต่ละ property (คั่นด้วยเครื่องหมายจุลภาค) แทนที่จะใช้ `all` ซึ่งอาจทำให้เคลื่อนไหวสิ่งที่คุณไม่ได้ตั้งใจและลดประสิทธิภาพ

## Timing functions

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## ประสิทธิภาพ: ทำให้ transform/opacity เคลื่อนไหว

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

ควรทำให้ `transform` และ `opacity` เคลื่อนไหว พวกเขาถูกจัดการโดย compositor โดยไม่ต้องรันการ layout ใหม่ ดังนั้นจึงยังคงนุ่มนวล (60 fps)

## ความสามารถในการเข้าถึง

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

## Neden önemli

Transition เพิ่มความเรียบเรียบที่ทำให้ UI ดูเป็นอย่างสม่ำเสมอและมีชีวิต (hover effects การเปลี่ยนแปลง state อย่างนุ่มนวล) ด้วยเพียงบรรทัดเดียว

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