คุณสมบัติการเปลี่ยน CSS
ตัวอย่าง
วางเมาส์เหนือองค์ประกอบ <div> เพื่อค่อยๆ เปลี่ยนความกว้างจาก 100px เป็น 300px:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
transition
ทรัพย์สินเป็นทรัพย์สินชวเลขสำหรับ:
หมายเหตุ:ระบุ คุณสมบัติ ช่วงการเปลี่ยนภาพ เสมอ มิฉะนั้น ระยะเวลาจะเป็น 0 วินาที และการเปลี่ยนแปลงจะไม่มีผลใดๆ
ค่าเริ่มต้น: | 0s ทั้งหมด 0s ง่าย 0s |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.transition="all 2s" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
transition | 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 duration timing-function delay|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เมื่อ <input type="text"> ได้รับการโฟกัส ให้ค่อยๆ เปลี่ยนความกว้างจาก 100px เป็น 250px:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การเปลี่ยน CSS
การอ้างอิง HTML DOM: คุณสมบัติการเปลี่ยนแปลง