transition คืออะไร

สอดระหว่างค่าเก่ากับค่าใหม่

เมื่อคุณสมบัติ CSS เปลี่ยน (เช่น hover หรือเพิ่มคลาส) transition ทำให้ค่านั้นเปลี่ยนแบบค่อยเป็นค่อยไปแทนการกระตุกทันที

.button {
  background: #0f766e;
  transition: background 200ms ease, transform 200ms ease;
}
.button:hover {
  background: #0d9488;
  transform: translateY(-2px);
}

ส่วนประกอบสั้น ๆ

คุณสมบัติ · ระยะเวลา · จังหวะ (ease / linear / ease-in-out) · ดีเลย์ (ถ้ามี)