CSS transition ภาษี

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

คุณสมบัติ transition คือคุณสมบัติย่อย ใช้เพื่อกำหนดสี่คุณสมบัติกระบวนการทางปฏิกิริยา

หมายเหตุ:เป็นที่ยิ่งไปกว่านั้นที่จะต้องกำหนด transition-duration หากไม่กำหนดคุณสมบัติ หรือถ้าเวลานั้นเป็น 0 จะไม่มีกระบวนการทางปฏิกิริยา

ดูเพิ่มเติม

CSS ตัวเรียนCSS การเปลี่ยนแปลง

คู่มือ HTML DOMคุณสมบัติ transition

ตัวอย่าง

จัดเเสดงลูกศัพท์บนองค์ประกอบ div ที่จะทำให้ความกว้างขององค์ประกอบเปลี่ยนจาก 100px มาเป็น 300px โดยเรียบเรียง

div {
  width: 100px;
  transition: width 2s;
}

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

CSS ระบบวิธี

transition: property duration timing-function delay;

ค่าของอุปกรณ์

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

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

ค่าเริ่มต้น: all 0 ease 0
การสืบทอด: no
เวอร์ชั่น: CSS3
JavaScript ระบบวิธี: object.style.transition="width 2s"

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

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

ตัวเลขที่มี -webkit- หรือ -moz- หรือ -o- ระบุเป็นสตริงตั้งต้นในเวอร์ชั่นใช้งานที่มีเปรียบกับเหล่าเดิม

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-