คุณสมบัติ CSS3 เปลี่ยนแปลง
ตัวอย่าง
เลื่อนเมาส์ไปที่ส่วน div และค่อยๆเปลี่ยนความกว้างของตารางจากการ 100px 300px ::
div
{
ความกว้าง: 100px;
การเปลี่ยนแปลง: 2s กว้าง;
-webkit-เปลี่ยนแปลง: 2s กว้าง; / * Safari * /
}
div: โฉบ {width: 300px;}
{
ความกว้าง: 100px;
การเปลี่ยนแปลง: 2s กว้าง;
-webkit-เปลี่ยนแปลง: 2s กว้าง; / * Safari * /
}
div: โฉบ {width: 300px;}
ลอง»
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
คุณสมบัติการเปลี่ยนแปลงเป็นที่พักชวเลขมีสี่คุณลักษณะ: สถานที่ให้บริการการเปลี่ยนแปลง, การเปลี่ยนแปลงระยะเวลาการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่นและการเปลี่ยนแปลงความล่าช้า
หมายเหตุ: เสมอระบุคุณสมบัติการเปลี่ยนแปลงระยะเวลาระยะเวลามิฉะนั้น 0, การเปลี่ยนแปลงจะไม่มีผลกระทบ
เริ่มต้น: | ทั้งหมด 0 ความง่ายดาย 0 |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.transition = "2S กว้าง" |
ไวยากรณ์
การเปลี่ยนแปลง: สถานที่ล่าช้าระยะเวลาระยะเวลาฟังก์ชั่น;
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |