การสร้าง Animation ด้วย CSS Transitions

การสร้าง Animation ด้วย CSS Transitions

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้ Pseudo-classes และ Pseudo-elements เพื่อเพิ่มความน่าสนใจให้กับเว็บไซต์ของเรา ในบทนี้ เราจะก้าวไปอีกขั้นด้วยการเรียนรู้วิธีการสร้าง Animation แบบง่ายๆ โดยใช้ CSS Transitions ซึ่งเป็นเครื่องมือที่ทรงพลังในการเพิ่มลูกเล่นและการตอบสนองให้กับ User Interface (UI) ของเรา

CSS Transitions คืออะไร?

CSS Transitions คือคุณสมบัติที่ช่วยให้เราสามารถเปลี่ยนค่า CSS properties จากค่าหนึ่งไปยังอีกค่าหนึ่งได้อย่างราบรื่น โดยกำหนดระยะเวลาและความเร็วในการเปลี่ยนผ่าน ทำให้เกิดเป็น Animation ที่ดูเป็นธรรมชาติและน่าดึงดูดใจ

การใช้ Transitions นั้นง่ายกว่าการสร้าง Animation ที่ซับซ้อนด้วย JavaScript หรือ CSS Keyframes (ที่เราจะเรียนรู้ในบทถัดไป) เหมาะสำหรับการสร้าง Animation ที่เรียบง่าย เช่น การเปลี่ยนสีเมื่อ Hover, การขยายขนาดเมื่อ Focus, หรือการเลื่อนตำแหน่งเมื่อคลิก

องค์ประกอบหลักของ CSS Transitions

Transitions ประกอบด้วยคุณสมบัติ CSS หลักๆ 4 อย่าง:

• transition-property: กำหนดคุณสมบัติ CSS ที่เราต้องการให้เกิด Transition
• transition-duration: กำหนดระยะเวลาในการเกิด Transition (หน่วยเป็นวินาที หรือ มิลลิวินาที)
• transition-timing-function: กำหนดรูปแบบความเร็วในการเกิด Transition
• transition-delay: กำหนดระยะเวลาก่อนที่ Transition จะเริ่มทำงาน

เราจะมาดูรายละเอียดของแต่ละคุณสมบัติพร้อมตัวอย่างกัน:

transition-property

คุณสมบัตินี้กำหนดว่า CSS property ใดที่เราต้องการให้เกิด Transition เมื่อมีการเปลี่ยนแปลงค่า ตัวอย่างเช่น เราอาจต้องการให้สีพื้นหลัง (background-color) เปลี่ยนแปลงอย่างราบรื่นเมื่อผู้ใช้ Hover เมาส์เหนือ element

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: background-color; /* กำหนดให้ background-color เกิด Transition */
}

.box:hover {
  background-color: lightcoral; /* เมื่อ Hover, background-color จะเปลี่ยนเป็น lightcoral */
}

ในตัวอย่างนี้ เมื่อเรา Hover เมาส์เหนือ element ที่มี class .box สีพื้นหลังจะค่อยๆ เปลี่ยนจาก lightblue เป็น lightcoral

เราสามารถกำหนดหลาย property ให้เกิด Transition ได้โดยคั่นด้วยเครื่องหมาย comma (,):

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: scale(1);
  transition-property: background-color, transform; /* กำหนดให้ทั้ง background-color และ transform เกิด Transition */
}

.box:hover {
  background-color: lightcoral;
  transform: scale(1.2); /* เมื่อ Hover, ขยายขนาดเป็น 1.2 เท่า */
}

หรือเราสามารถใช้ all เพื่อให้ทุก property ที่มีการเปลี่ยนแปลงเกิด Transition:

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: all; /* ทุก property ที่เปลี่ยนจะเกิด Transition */
}

.box:hover {
  background-color: lightcoral;
  transform: scale(1.2);
  opacity: 0.8;
}

ข้อควรระวัง: การใช้ all อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดหากมี properties ที่เราไม่ได้ตั้งใจให้เกิด Transition ดังนั้นควรใช้ด้วยความระมัดระวังและตรวจสอบผลลัพธ์อย่างละเอียด

transition-duration

คุณสมบัตินี้กำหนดระยะเวลาในการเกิด Transition มีหน่วยเป็นวินาที (s) หรือมิลลิวินาที (ms) ยิ่งระยะเวลานานขึ้น การเปลี่ยนแปลงก็จะยิ่งช้าลง

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: background-color;
  transition-duration: 0.5s; /* กำหนดระยะเวลา 0.5 วินาที */
}

.box:hover {
  background-color: lightcoral;
}

ในตัวอย่างนี้ การเปลี่ยนสีพื้นหลังจะใช้เวลา 0.5 วินาที

หากเรากำหนด Transition ให้กับหลาย property เราสามารถกำหนดระยะเวลาที่แตกต่างกันได้:

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: scale(1);
  transition-property: background-color, transform;
  transition-duration: 0.5s, 0.2s; /* background-color ใช้เวลา 0.5s, transform ใช้เวลา 0.2s */
}

.box:hover {
  background-color: lightcoral;
  transform: scale(1.2);
}

เหตุผลเชิงออกแบบ: การเลือก transition-duration ที่เหมาะสมเป็นสิ่งสำคัญต่อประสบการณ์ผู้ใช้ (UX) ระยะเวลาที่สั้นเกินไปอาจทำให้ Animation ดูฉับพลันและไม่เป็นธรรมชาติ ในขณะที่ระยะเวลาที่นานเกินไปอาจทำให้ผู้ใช้รู้สึกว่าเว็บไซต์ตอบสนองช้า โดยทั่วไป ระยะเวลา 0.2s - 0.5s มักเป็นช่วงที่เหมาะสมสำหรับ Animation ทั่วไป

transition-timing-function

คุณสมบัตินี้กำหนดรูปแบบความเร็วในการเกิด Transition หรือที่เรียกว่า "easing function" มีค่าต่างๆ ให้เลือกใช้มากมาย:

• linear: ความเร็วคงที่ตลอดการ Transition
• ease: (ค่าเริ่มต้น) เริ่มต้นช้า, เร็วขึ้นในช่วงกลาง, และช้าลงตอนท้าย
• ease-in: เริ่มต้นช้า
• ease-out: ช้าลงตอนท้าย
• ease-in-out: เริ่มต้นช้าและช้าลงตอนท้าย
• cubic-bezier(n,n,n,n): กำหนด easing function เองโดยใช้ Bézier curve

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out; /* กำหนด easing function เป็น ease-in-out */
}

.box:hover {
  background-color: lightcoral;
}

ease-in-out เป็น easing function ที่นิยมใช้กันเนื่องจากให้ความรู้สึกที่เป็นธรรมชาติและนุ่มนวล

แนวปฏิบัติที่ดี: การเลือก transition-timing-function ที่เหมาะสมสามารถช่วยสื่อถึงความหมายและอารมณ์ที่แตกต่างกัน ตัวอย่างเช่น ease-in เหมาะสำหรับ Animation ที่แสดงการเข้ามาขององค์ประกอบ ในขณะที่ ease-out เหมาะสำหรับ Animation ที่แสดงการหายไป

transition-delay

คุณสมบัตินี้กำหนดระยะเวลาก่อนที่ Transition จะเริ่มทำงาน มีหน่วยเป็นวินาที (s) หรือมิลลิวินาที (ms)

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: 0.2s; /* กำหนดให้ Transition เริ่มหลังจาก 0.2 วินาที */
}

.box:hover {
  background-color: lightcoral;
}

ในตัวอย่างนี้ เมื่อเรา Hover เมาส์เหนือ element ที่มี class .box Transition จะเริ่มทำงานหลังจาก 0.2 วินาที

transition-delay สามารถใช้เพื่อสร้าง Animation ที่ซับซ้อนยิ่งขึ้น โดยการหน่วงเวลาการเริ่มต้นของ Transitions ที่แตกต่างกัน

Shorthand Property: transition

เพื่อความสะดวก เราสามารถใช้ shorthand property transition เพื่อกำหนดค่าทั้งหมดของ Transition ในบรรทัดเดียว:

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: background-color 0.5s ease-in-out 0.2s; /* shorthand property */
}

.box:hover {
  background-color: lightcoral;
}

ลำดับของค่าใน shorthand property คือ: transition-property, transition-duration, transition-timing-function, transition-delay (transition-property และ transition-duration เป็นค่าที่จำเป็นต้องมี)

สรุป

CSS Transitions เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง Animation ที่เรียบง่ายและสวยงามให้กับเว็บไซต์ของเรา ด้วยการทำความเข้าใจคุณสมบัติหลักๆ เช่น transition-property, transition-duration, transition-timing-function, และ transition-delay เราสามารถเพิ่มลูกเล่นและการตอบสนองให้กับ UI ของเราได้อย่างง่ายดาย

ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการสร้าง Animation ที่ซับซ้อนยิ่งขึ้นด้วย CSS Keyframes ซึ่งจะเปิดโลกแห่งความเป็นไปได้ในการสร้าง Animation ที่น่าทึ่งให้กับเว็บไซต์ของคุณ