คุณสมบัติการเปลี่ยนแปลงคุณสมบัติCSS
ตัวอย่าง
วางเมาส์เหนือองค์ประกอบ <div> และเปลี่ยนความกว้างด้วยเอฟเฟกต์การเปลี่ยนที่ราบรื่น:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติtransition-property
ระบุชื่อของคุณสมบัติ CSS ที่เอฟเฟกต์การเปลี่ยนแปลงนั้นมีไว้สำหรับ (เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มขึ้นเมื่อคุณสมบัติ CSS ที่ระบุเปลี่ยนแปลง)
เคล็ดลับ:โดยทั่วไป เอฟเฟกต์การเปลี่ยนแปลงอาจเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
หมายเหตุ:ระบุ คุณสมบัติ ช่วงการเปลี่ยนภาพ เสมอ มิฉะนั้น ระยะเวลาจะเป็น 0 และการเปลี่ยนแปลงจะไม่มีผลใดๆ
ค่าเริ่มต้น: | ทั้งหมด |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.transitionProperty="width,height" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
ไวยากรณ์ CSS
transition-property: none|all|property|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วางเมาส์เหนือองค์ประกอบ <div> และเปลี่ยนความกว้างและความสูงด้วยเอฟเฟกต์การเปลี่ยนที่ราบรื่น:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การเปลี่ยน CSS
การอ้างอิง HTML DOM: คุณสมบัติของ TransitProperty