CSS3 Transitions
เปลี่ยน CSS3 ช่วยให้คุณสามารถเปลี่ยนค่าสถานที่ให้บริการได้อย่างราบรื่น (จากมูลค่าหนึ่งไปยังอีก) ในช่วงระยะเวลาที่กำหนด
ตัวอย่าง: เลื่อนเมาส์ไปที่องค์ประกอบด้านล่างเพื่อดูผลการเปลี่ยนแปลง CSS3:
สนับสนุนเบราว์เซอร์สำหรับการเปลี่ยน
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| 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 คุณสมบัติที่คุณต้องการที่จะเพิ่มผลกระทบต่อ
- ระยะเวลาของผลกระทบที่
หมายเหตุ: หากส่วนระยะเวลาไม่ได้ระบุการเปลี่ยนแปลงจะไม่มีผลกระทบเพราะค่าเริ่มต้นคือ 0
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง 100px * 100px สีแดง <div> องค์ประกอบ <div> องค์ประกอบยังได้ระบุผลการเปลี่ยนแปลงสำหรับคุณสมบัติกว้างที่มีระยะเวลา 2 วินาที:
ตัวอย่าง
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
ผลการเปลี่ยนแปลงจะเริ่มเมื่อระบุคุณสมบัติ CSS (กว้าง) การเปลี่ยนแปลงค่า
ตอนนี้ให้เราระบุค่าใหม่สำหรับคุณสมบัติความกว้างเมื่อ mouses ผู้ใช้มากกว่า <div> องค์ประกอบ:
ขอให้สังเกตว่าเมื่อ mouses เคอร์เซอร์ออกจากองค์ประกอบก็จะค่อยๆเปลี่ยนกลับไปเป็นรูปแบบเดิม
เปลี่ยนหลายค่าทรัพย์สิน
ตัวอย่างต่อไปนี้จะเพิ่มผลการเปลี่ยนแปลงสำหรับทั้งความกว้างและคุณสมบัติสูงที่มีระยะเวลา 2 วินาทีสำหรับความกว้างและ 4 วินาทีสำหรับความสูงไปนี้:
ตัวอย่าง
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
ลองตัวเอง» ระบุ Curve ความเร็วของการเปลี่ยนแปลง
transition-timing-function คุณสมบัติที่ระบุโค้งความเร็วของผลกระทบการเปลี่ยนแปลง
สถานที่ให้บริการการเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่นสามารถมีค่าต่อไปนี้:
-
ease- ระบุผลการเปลี่ยนแปลงกับการเริ่มต้นช้าแล้วอย่างรวดเร็วแล้วจบช้า (นี้เป็นค่าเริ่มต้น) -
linear- ระบุผลการเปลี่ยนแปลงที่มีความเร็วเท่ากันตั้งแต่ต้นจนจบ -
ease-in- ระบุผลการเปลี่ยนแปลงที่มีการเริ่มต้นช้า -
ease-out- ระบุผลการเปลี่ยนแปลงที่มีปลายช้า -
ease-in-out- ระบุผลการเปลี่ยนแปลงที่มีจุดเริ่มต้นและจุดสิ้นสุดช้า -
cubic-bezier(n,n,n,n)- ช่วยให้คุณสามารถกำหนดค่าของคุณเองใน cubic-bezier ฟังก์ชั่น
ตัวอย่างต่อไปนี้แสดงให้เห็นบางส่วนของเส้นโค้งที่ความเร็วที่แตกต่างกันที่สามารถใช้:
ตัวอย่าง
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} ลองตัวเอง» ความล่าช้าผลการเปลี่ยนแปลง
transition-delay คุณสมบัติระบุความล่าช้า (วินาที) สำหรับผลการเปลี่ยนแปลง
ตัวอย่างต่อไปนี้มีความล่าช้าใน 1 วินาทีก่อนที่จะเริ่ม:
การเปลี่ยนแปลงการเปลี่ยนแปลง +
ตัวอย่างต่อไปนี้ยังเพิ่มการเปลี่ยนแปลงที่มีผลการเปลี่ยนแปลงไปนี้:
ตัวอย่าง
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} ลองตัวเอง» ตัวอย่างเพิ่มเติมในการเปลี่ยน
คุณสมบัติ CSS3 การเปลี่ยนแปลงสามารถระบุหนึ่งโดยหนึ่งเช่นนี้
ตัวอย่าง
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
ลองตัวเอง» หรือโดยการใช้สถานที่ให้บริการจดชวเลข transition :
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
CSS3 คุณสมบัติการเปลี่ยน
ตารางต่อไปนี้แสดงคุณสมบัติการเปลี่ยนแปลง:
| คุณสมบัติ | ลักษณะ |
|---|---|
| transition | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าคุณสมบัติการเปลี่ยนแปลงสี่เป็นคุณสมบัติเดียว |
| transition-delay | ระบุความล่าช้า (วินาที) สำหรับผลการเปลี่ยนแปลง |
| transition-duration | ระบุวิธีการหลายวินาทีหรือมิลลิวินาทีผลการเปลี่ยนแปลงที่จะใช้เวลาที่จะเสร็จสมบูรณ์ |
| transition-property | ระบุชื่อของคุณสมบัติ CSS ผลการเปลี่ยนแปลงมีไว้สำหรับ |
| transition-timing-function | ระบุโค้งความเร็วของผลกระทบการเปลี่ยนแปลง |