คุณสมบัติ Style transition

การกำหนดและการใช้งาน

transition คุณสมบัตินี้เป็นศัพท์ย่อของสี่คุณสมบัติการเคลื่อนไหว:

หมายเหตุ:เป็นที่สำคัญที่จะกำหนด transitionDuration คุณสมบัติหากไม่กำหนด จะมีเวลาเดินทาง 0 วินาที และการเคลื่อนไหวจะไม่มีประโยชน์。

ดูเพิ่มเติม:

คู่มือ CSS:transition คุณสมบัติ

ตัวอย่าง

ให้เคลื่อนที่เมาส์เหนือตัวองค์กรรม div เพื่อเปลี่ยนรูปแบบแบบเรียบเรียง:

document.getElementById("myDIV").style.transition = "all 2s";

ทดลองด้วยตัวเอง

ศัพท์

คืนค่าคุณสมบัติ transition:

object.style.transition

ตั้งคุณสมบัติ transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

ค่าคุณสมบัติ

ค่า รายละเอียด
transitionProperty กำหนดชื่อของคุณสมบัติ CSS ที่ตัวเคลื่อนไหวเกี่ยวข้อง
transitionDuration กำหนดเวลาที่ต้องใช้เพื่อให้การเคลื่อนไหวเสร็จสมบูรณ์
transitionTimingFunction กำหนดเนื่องตามเวลาของการเคลื่อนไหว
transitionDelay กำหนดว่าทำไมตัวเคลื่อนไหวจะเริ่มขึ้น
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial.
inherit สืบทอดคุณสมบัตินี้จากตัวปลายทางของเธอ โปรดดู inherit.

รายละเอียดเทคนิค

ค่าเริ่มต้น: all 0 ease 0
ค่าที่คืนค่า: ตัวอักษร แสดงถึง transition คุณสมบัติ.
เวอร์ชั่น CSS: CSS3

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางบอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1