คุณสมบัติ transition-duration

คุณสมบัติ transition-duration กำหนด เวลาที่ใช้ในการเปลี่ยนแปลงแบบ gradual transition transition

ไวยากรณ์

cssselector {
  transition-duration: เวลาในหน่วย s หรือ ms;
}

ค่า

ค่า	คำอธิบาย
`s`	กำหนดเวลาในหน่วยวินาที (เช่น `3s`) สามารถกำหนดค่าเศษส่วนได้ เช่น `0.5s` - ครึ่งวินาที
`ms`	กำหนดเวลาในหน่วยมิลลิวินาที (เช่น `3ms`) หนึ่งวินาทีเท่ากับ `1000` มิลลิวินาที

ค่าเริ่มต้น: 0s

ตัวอย่าง

ลองวางเมาส์เหนือบล็อก - มันจะเปลี่ยน ความกว้างของมันอย่างช้าๆในเวลา 2 วินาที

html<div id="elem"></div>

css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

ดูเพิ่มเติม

คุณสมบัติ transition-property,
ซึ่งกำหนดชื่อคุณสมบัติสำหรับการเปลี่ยนแปลงแบบ gradual transition
คุณสมบัติ transition-delay,
ซึ่งกำหนดความล่าช้าก่อนเริ่มการเปลี่ยนแปลงแบบ gradual transition
คุณสมบัติ transition-timing-function,
ซึ่งกำหนดฟังก์ชันเวลาสำหรับการเปลี่ยนแปลงแบบ gradual transition
คุณสมบัติ transition,
ซึ่งเป็นตัวย่อสำหรับการกำหนดค่า transition
คุณสมบัติ animation,
ซึ่งใช้สำหรับสร้าง animation