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) · ดีเลย์ (ถ้ามี)