สถานที่ให้บริการสถานที่ให้บริการการเปลี่ยนแปลง CSS3
ตัวอย่าง
เลื่อนเมาส์ไปที่ส่วน div และค่อยๆเปลี่ยนความกว้างของตาราง:
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
ลอง»
ในด้านล่างของหน้านี้ตัวอย่างมากขึ้น
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
| 属性 | |||||
|---|---|---|---|---|---|
| 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 nametransition ทรัพย์สิน (CSS จะเริ่มต้นที่ระบุการเปลี่ยนแปลงสถานที่ให้บริการเมื่อผลการเปลี่ยนแปลง)
เคล็ดลับ: ผลการเปลี่ยนแปลงที่มักจะเกิดขึ้นเมื่อผู้ใช้เลื่อนผ่านองค์ประกอบ
หมายเหตุ: เสมอระบุคุณสมบัติการเปลี่ยนแปลงระยะเวลาระยะเวลามิฉะนั้น 0, การเปลี่ยนแปลงจะไม่มีผลกระทบ
| เริ่มต้น: | ทั้งหมด |
|---|---|
| มรดก: | ไม่ |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | วัตถุ .style.transitionProperty = "ความกว้างความสูง" |
ไวยากรณ์
transition-property: none|all|
property;
| ความคุ้มค่า | ลักษณะ |
|---|---|
| ไม่มีเลย | ไม่มีการเปลี่ยนสถานที่ให้บริการที่ได้รับ |
| ทั้งหมด | คุณสมบัติทั้งหมดจะได้รับผลกระทบการเปลี่ยนแปลง |
| คุณสมบัติ | คำจำกัดความใช้ผลการเปลี่ยนแปลง CSS รายชื่อทรัพย์สินซึ่งคั่นด้วยเครื่องหมายจุลภาค |
ตัวอย่างเพิ่มเติม
ผลการเปลี่ยนแปลง - เพื่อเปลี่ยนคุณสมบัติทั้งสอง
เลื่อนเมาส์ไปที่ส่วน div เปลี่ยนความกว้างและความสูงมีผลการเปลี่ยนแปลงได้อย่างราบรื่น