ทำความเข้าใจ CSS Transitions

CSS Transitions คือเครื่องมือที่ช่วยให้ UI ของคุณดู Smooth และมีชีวิตชีวาขึ้น เพียงแค่คุณเปลี่ยนค่าคุณสมบัติ (CSS Property) อย่างช้า ๆ ตามระยะเวลาที่กำหนด คุณสามารถปรับแต่งทุกอย่าง ตั้งแต่การขยายขนาดกล่องไปจนถึงการเคลื่อนไหวขององค์ประกอบต่าง ๆ ได้ง่าย ๆ ด้วยคำสั่งไม่กี่บรรทัด

CSS Transitions คืออะไร?

Transitions ใน CSS ใช้สำหรับสร้างเอฟเฟกต์การเปลี่ยนแปลงค่าคุณสมบัติ (CSS Property) ให้ดูนุ่มนวลและลื่นไหล เช่น เมื่อผู้ใช้โต้ตอบกับองค์ประกอบ หรือเมื่อค่า Property เปลี่ยนแปลงอัตโนมัติ หัวใจสำคัญของ CSS Transitions

1. transition กำหนดการเปลี่ยนแปลง (Transition Effect) สำหรับคุณสมบัติที่ระบุ เช่น ความกว้าง (width) หรือสีพื้นหลัง (background-color)

2. transition-duration ระบุระยะเวลา (ในวินาทีหรือมิลลิวินาที) ที่ใช้ในการเปลี่ยนแปลง

3. transition-property ระบุชื่อ Property ที่ต้องการเพิ่ม Transition Effect

4. transition-timing-function ปรับแต่งความเร็วของเอฟเฟกต์ เช่น ease-in (เริ่มช้า), linear (ความเร็วคงที่), หรือใช้ cubic-bezier เพื่อกำหนดเส้นโค้งความเร็วเอง

5. transition-delay เพิ่มเวลา Delay ก่อนเริ่มเอฟเฟกต์

ตัวอย่างการใช้งาน

1. เพิ่มเอฟเฟกต์ Transition ให้กับ width

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>

<div>Mouse Over Me</div>

ผลลัพธ์: เมื่อวางเมาส์บนกล่องสีแดง ความกว้างจะขยายอย่าง Smooth

2. เพิ่ม Transition หลาย Property พร้อมกัน

<style>
div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 200px;
}
</style>

ผลลัพธ์: กล่องเปลี่ยนทั้งความกว้างและความสูงในช่วงเวลาที่กำหนด

3. ใช้ Timing Function เพื่อควบคุมความเร็ว

<style>
div {
  width: 100px;
  height: 100px;
  background: green;
  transition: width 2s ease-in-out;
}

div:hover {
  width: 300px;
}
</style>

ผลลัพธ์: การเปลี่ยนความกว้างเริ่มและสิ้นสุดอย่างช้า

เคล็ดลับการใช้งาน CSS Transitions

1. Preload Transition ใช้ :hover หรือ :focus เพื่อเพิ่มเอฟเฟกต์เฉพาะการโต้ตอบ
2. ไม่ทำงาน? ตรวจสอบว่าคุณระบุ transition-duration หรือยัง เพราะค่าดีฟอลต์คือ 0
3. ใช้คู่กับ Transform เช่น scale, rotate, หรือ translate เพื่อสร้างเอฟเฟกต์เคลื่อนไหวที่โดดเด่น

สรุป

CSS Transitions เป็นฟีเจอร์ที่ช่วยพัฒนาประสบการณ์ผู้ใช้ให้ลื่นไหลและน่าสนใจมากขึ้น เพียงใช้ transition และ transition-* properties คุณก็สามารถสร้างเอฟเฟกต์การเปลี่ยนแปลงที่ดู Smooth และใช้งานง่ายได้ทันที