เปลี่ยน CSS3
เปลี่ยน CSS3
CSS3 เราต้องเพิ่มผลที่สามารถแปลงจากรูปแบบหนึ่งไปยังอีกครั้งโดยไม่ต้องใช้ภาพเคลื่อนไหว Flash หรือจาวาสคริปต์ เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:
เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:
การเปลี่ยนแปลง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -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- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
มันทำงานอย่างไร?
การเปลี่ยนแปลง CSS3 เป็นองค์ประกอบค่อยๆเปลี่ยนจากรูปแบบหนึ่งที่มีผลอีก
เพื่อให้บรรลุนี้สองสิ่งที่ต้องมีการกำหนด:
- ฉันต้องการที่จะเพิ่มผลของคุณสมบัติของ CSS
- ระบุระยะเวลาของผลกระทบที่
ตัวอย่าง
แอตทริบิวต์ความกว้างใช้ผลการเปลี่ยนแปลงระยะเวลา 2 วินาที:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
หมายเหตุ: หากคุณไม่ได้ระบุระยะเวลาการเปลี่ยนแปลงจะไม่มีผลกระทบเพราะค่าเริ่มต้นคือ 0
ผลจะเปลี่ยนค่าของการเปลี่ยนแปลงที่ระบุคุณสมบัติ CSS ที่ การเปลี่ยนแปลงคุณสมบัติ CSS ทั่วไปคือเมาส์ผู้ใช้มากกว่าองค์ประกอบ:
ตัวอย่าง
บทบัญญัติเมื่อระงับชี้เมาส์ (: โฉบ) ที่ <div> เมื่อ:
{
width: 300px;
}
ลอง»
หมายเหตุ: เมื่อเคอร์เซอร์ของเมาส์ไปยังองค์ประกอบก็ค่อยๆเปลี่ยนรูปแบบเดิม
จำนวนของการเปลี่ยนแปลง
หากต้องการเพิ่มมากกว่าหนึ่งผลของรูปแบบการเปลี่ยนแปลงเพิ่มแอตทริบิวต์คั่นด้วยเครื่องหมายจุลภาค:
ตัวอย่าง
เพิ่มผลกระทบความกว้างความสูงและการเปลี่ยนแปลง:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
ลอง»
คุณสมบัติการเปลี่ยน
ตารางต่อไปนี้แสดงคุณสมบัติการเปลี่ยนแปลง:
| คุณสมบัติ | ลักษณะ | CSS |
|---|---|---|
| การเปลี่ยนแปลง | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าคุณสมบัติที่สี่การเปลี่ยนแปลงในสถานที่ให้บริการ | 3 |
| สถานที่ให้บริการการเปลี่ยนแปลง | ชื่อของ CSS คุณสมบัติบทบัญญัติเปลี่ยนแปลงมีผลบังคับใช้ | 3 |
| การเปลี่ยนแปลงระยะเวลา | เพื่อกำหนดเวลาผลการเปลี่ยนแปลงที่ใช้ เริ่มต้นเป็น 0 | 3 |
| การเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น | ที่กำหนดไว้เปลี่ยนแปลงโค้งเวลามีผลบังคับใช้ ค่าเริ่มต้นคือ "ความสะดวก" | 3 |
| การเปลี่ยนแปลงความล่าช้า | บทบัญญัติเมื่อเริ่มต้นผลการเปลี่ยนแปลง เริ่มต้นเป็น 0 | 3 |
สองตัวอย่างต่อไปตั้งค่าคุณสมบัติการเปลี่ยนแปลงทั้งหมด:
ตัวอย่าง
ใช้คุณสมบัติการเปลี่ยนแปลงในตัวอย่างที่หนึ่ง:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
ลอง»
ตัวอย่าง
และตัวอย่างของผลกระทบการเปลี่ยนแปลงเดียวกันข้างต้น แต่ใช้คุณสมบัติการเปลี่ยนชวเลข:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
ลอง»