Mission 14: Transition

เป้าหมายของ Mission นี้: ทำให้การเปลี่ยนแปลงนุ่มนวลด้วย transition

transition

ปกติเวลา CSS เปลี่ยนค่า (เช่นตอน hover) มันเปลี่ยนทันทีแบบกระตุก — transition: <property> <ระยะเวลา>; บอกเบราว์เซอร์ให้ค่อยๆ ไล่ค่าเก่าไปค่าใหม่ แทนที่จะกระโดดทันที

Demo

.card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 300ms;
}

ใส่ transition ที่กฎปกติ (ไม่ใช่ :hover) เพราะต้องการให้นุ่มนวลทั้งตอน เข้าและออกจาก hover