CSS ความสำคัญของ transition-duration 属性

คำนิยามและการใช้งาน

transition-duration ความงามกำหนดเวลาที่ต้องใช้เพื่อทำให้สิ่งเคลื่อนไหวเสร็จสมบูรณ์ (เป็นวินาทีหรือมิลลิวินาที)

ดูเพิ่มเติม

คู่มือเรียน CSSCSS การเปลี่ยนแปลง

คู่มืออ้างอิง HTML DOMtransitionDuration ความงาม

ตัวอย่าง

ทำให้สิ่งเคลื่อนไหวยืดเยื้อน 5 วินาที

div {
  transition-duration: 5s;
}

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

การเขียน CSS

transition-duration: time;

ค่านิยาม

ค่า คำอธิบาย
time

กำหนดเวลาที่ต้องใช้เพื่อทำให้สิ่งเคลื่อนไหวเสร็จสมบูรณ์ (เป็นวินาทีหรือมิลลิวินาที)

ค่าเริ่มต้นคือ 0 หมายความว่าจะไม่มีผล

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

ค่าเริ่มต้น 0
มีการสืบทอด no
รุ่น CSS3
JavaScript การเขียน object.style.transitionDuration="5s"

การสนับสนุนโดยบราวเซอร์

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

ตัวเลขที่มี -webkit-、-moz- หรือ -o- แสดงว่าใช้ prefix รุ่นแรก

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-