ตัวอย่าง
เลื่อนเมาส์ไปที่ส่วน div ที่จะค่อยๆเปลี่ยนรูปลักษณ์ของมัน
document.getElementById("myDIV").style.transition = "all 2s";
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการการเปลี่ยนแปลงเป็นที่พักจดชวเลขสี่คุณสมบัติการเปลี่ยน:
transitionProperty, transitionDuration, transitionTimingFunction และ transitionDelay
Note: เสมอระบุคุณสมบัติ transitionDuration มิฉะนั้นระยะเวลาเป็น 0 และการเปลี่ยนแปลงจะไม่มีผลกระทบ
สนับสนุนเบราว์เซอร์
การเปลี่ยนแปลงสถานที่ให้บริการได้รับการสนับสนุนใน Internet Explorer 10, Firefox, Opera และ Chrome
ซาฟารีสนับสนุนทางเลือกคุณสมบัติ WebkitTransition
หมายเหตุ: คุณสมบัติการเปลี่ยนแปลงไม่ได้รับการสนับสนุนใน Internet Explorer 9 และรุ่นก่อนหน้า
วากยสัมพันธ์
คืนทรัพย์สินเปลี่ยนแปลง:
object .style.transition ตั้งค่าคุณสมบัติการเปลี่ยนแปลง:
object .style.transition=" ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ transitionProperty ระบุชื่อของคุณสมบัติ CSS ผลการเปลี่ยนแปลงมีไว้สำหรับ transitionDuration ระบุวิธีการหลายวินาทีหรือมิลลิวินาทีผลการเปลี่ยนแปลงที่จะเกิดให้เสร็จสมบูรณ์ transitionTimingFunction ระบุโค้งความเร็วของผลกระทบการเปลี่ยนแปลง transitionDelay กำหนดเมื่อผลการเปลี่ยนแปลงจะเริ่มต้น initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: ทั้งหมด 0 ความสะดวก 0 กลับค่า: สตริงที่เป็นตัวแทนของการเปลี่ยนแปลงคุณสมบัติขององค์ประกอบ CSS รุ่น CSS3
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: transition property
<สไตล์วัตถุ