css transition

#พื้นฐานการเขียนเว็ปไซต์

#CSS

#trasition

CSS transitions คือ ฟีเจอร์ใน CSS ที่ทำให้การเปลี่ยนแปลงคุณสมบัติ (property) ขององค์ประกอบเว็บเกิดขึ้นอย่างราบรื่น แทนที่จะเปลี่ยนทันทีทันใด โดยคุณสามารถกำหนดคุณสมบัติของ Transition เช่น การหน่วงเวลา (transition-delay), ระยะเวลา (transition-duration), และลักษณะการเปลี่ยนแปลง (transition-timing-function) เพื่อควบคุมการเปลี่ยนค่าจากสถานะหนึ่งไปยังอีกสถานะหนึ่ง เช่น การเปลี่ยนสีพื้นหลังให้ค่อยๆ เปลี่ยนไปอย่างนุ่มนวลเมื่อผู้ใช้โฮเวอร์ (hover) เมาส์, เพื่อเพิ่มประสบการณ์ที่ดีและน่าสนใจให้กับผู้ใช้งาน.

หลักการทำงาน

การเปลี่ยนสถานะ:

CSS transition ทำงานเมื่อคุณสมบัติ (property) ของ element มีการเปลี่ยนแปลงค่า เช่น จากสถานะปกติไปสู่สถานะเมื่อโฮเวอร์ (hover) หรือโฟกัส (focus).

ค่าเริ่มต้นและค่าสุดท้าย:

Transition จะกำหนดค่าเริ่มต้นและค่าสุดท้ายของ property นั้นๆ.

การหน่วงเวลาและระยะเวลา:

คุณสามารถตั้งค่าให้การเปลี่ยนแปลงเริ่มหน่วงเวลา หรือกำหนดระยะเวลาที่ต้องการให้การเปลี่ยนแปลงค่อยๆ เกิดขึ้น.

ลักษณะการเปลี่ยนแปลง (Easing Function):

คุณสามารถกำหนดอัตราเร่งความเร็วของการเปลี่ยนแปลงได้ เช่น ให้เริ่มเร็วแล้วช้าลง (ease-out) หรือเปลี่ยนด้วยความเร็วคงที่ (linear).

วิธีใช้งาน

คุณสามารถกำหนด CSS transitions ด้วยคุณสมบัติ:

transition-property:

ระบุว่าคุณสมบัติใดที่ต้องการให้เกิด transition.

transition-duration:

กำหนดระยะเวลาที่ใช้ในการเปลี่ยนค่า.

transition-delay:

กำหนดเวลาหน่วงก่อนที่ transition จะเริ่มทำงาน.

transition-timing-function:

กำหนดอัตราเร่งความเร็วของการเปลี่ยนแปลง.

transition:

เป็น property แบบย่อ (shorthand) ที่รวมคุณสมบัติเหล่านี้ไว้ในบรรทัดเดียว.

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

สมมติว่าคุณต้องการให้สีพื้นหลังของปุ่มเปลี่ยนจากสีแดงเป็นสีน้ำเงินอย่างนุ่มนวลเมื่อโฮเวอร์เมาส์ คุณสามารถเขียนโค้ดได้ดังนี้:

Code

.my-button {

background-color: red;

transition: background-color 0.5s ease-out; /* กำหนดให้เปลี่ยนสีพื้นหลังใน 0.5 วินาที */

}

.my-button:hover {

background-color: blue;

}