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

คุณสมบัติ transition-property กำหนด คุณสมบัติที่จะถูกทำให้เคลื่อนไหวอย่างลื่นไหล ด้วยการเปลี่ยนผ่าน transition ค่าที่ควรส่ง คือชื่อคุณสมบัติ CSS ที่จะถูกทำให้เคลื่อนไหว หากกำหนดค่าเป็น all (ซึ่งเป็นค่าที่ตั้งไว้โดยค่าเริ่มต้น) - ทุกคุณสมบัติ จะถูกทำให้เคลื่อนไหวพร้อมกัน

ไวยากรณ์

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

ตัวอย่าง

เลื่อนเมาส์มาบนบล็อก - มันจะเปลี่ยน ความกว้างของมันอย่างลื่นไหล เนื่องจาก transition-property มีค่าเป็น width:

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

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

Результат:

ตัวอย่าง . ค่า all

ในตัวอย่างนี้ transition-property มีค่าเป็น all - ดังนั้นคุณสมบัติทั้งหมด ที่เขียนไว้สำหรับสถานะ hover จะเปลี่ยน อย่างลื่นไหล (ในกรณีของเรา นี่คือ width และ height) การเปลี่ยนแปลงทั้งหมด จะเกิดขึ้นภายในเวลาเดียวกัน ซึ่งกำหนดไว้ ใน transition-duration:

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

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

Результат:

ดูเพิ่มเติม