คุณสมบัติ transition

คุณสมบัติ transition เป็นคุณสมบัติชวรสำหรับ การเปลี่ยนแปลงอย่างลื่นไหล ช่วยให้กำหนด transition-duration, transition-property, transition-timing-function และ transition-delay พร้อมกันได้

ไวยากรณ์

cssตัวเลือก {
  transition: ค่า;
}

ลำดับของคุณสมบัติไม่มีผล อย่างไรก็ตาม เวลาดำเนินการ (transition-duration) ต้องอยู่ก่อนเวลาล่าช้า (transition-delay)

ค่า

ดูคุณสมบัติที่เกี่ยวข้อง ค่าเริ่มต้น: all 0s ease 0s

ค่า none จะยกเลิกการเปลี่ยนแปลงทั้งหมด (การเปลี่ยนแปลงจะเกิดขึ้นทันที)

ตัวอย่าง

วางเมาส์บนบล็อก - จะไม่มีอะไรเกิดขึ้นเป็นเวลา 3 วินาที (มีการตั้งค่าล่าช้า 3s) จากนั้นความกว้างของมันจะเปลี่ยนแปลง อย่างลื่นไหลในเวลา 2 วินาที หากเลื่อนเมาส์ออก - อีกครั้ง จะไม่มีอะไรเกิดขึ้นเป็นเวลา 3 วินาที จากนั้นความกว้างจะลดลงอย่างลื่นไหล สู่ค่าเดิม:

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

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

Результат:

ดูเพิ่มเติม