การ เปลี่ยน CSS
การเปลี่ยน CSS
การเปลี่ยน CSS ช่วยให้คุณเปลี่ยนค่าคุณสมบัติได้อย่างราบรื่นตลอดระยะเวลาที่กำหนด
วางเมาส์เหนือองค์ประกอบด้านล่างเพื่อดูเอฟเฟกต์การเปลี่ยน CSS:
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
การสนับสนุนเบราว์เซอร์สำหรับการเปลี่ยน
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
วิธีการใช้การเปลี่ยน CSS?
ในการสร้างเอฟเฟกต์การเปลี่ยน คุณต้องระบุสองสิ่ง:
- คุณสมบัติ CSS ที่คุณต้องการเพิ่มเอฟเฟกต์
- ระยะเวลาของผลกระทบ
หมายเหตุ:หากไม่ได้ระบุส่วนของระยะเวลา การเปลี่ยนแปลงจะไม่มีผล เนื่องจากค่าเริ่มต้นคือ 0
ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <div> สีแดง 100px * 100px องค์ประกอบ <div> ยังได้ระบุเอฟเฟกต์การเปลี่ยนแปลงสำหรับคุณสมบัติ width ด้วยระยะเวลา 2 วินาที:
ตัวอย่าง
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มขึ้นเมื่อคุณสมบัติ CSS ที่ระบุ (ความกว้าง) เปลี่ยนค่า
ตอนนี้ ให้เราระบุค่าใหม่สำหรับคุณสมบัติ width เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ <div>:
ตัวอย่าง
div:hover
{
width: 300px;
}
สังเกตว่าเมื่อเคอร์เซอร์เลื่อนเมาส์ออกจากองค์ประกอบ จะค่อยๆ เปลี่ยนกลับเป็นสไตล์ดั้งเดิม
เปลี่ยนค่าคุณสมบัติหลายอย่าง
ตัวอย่างต่อไปนี้เพิ่มเอฟเฟกต์การเปลี่ยนแปลงสำหรับคุณสมบัติความกว้างและความสูง ด้วยระยะเวลา 2 วินาทีสำหรับความกว้างและ 4 วินาทีสำหรับความสูง:
ตัวอย่าง
div
{
transition: width 2s, height 4s;
}
ระบุเส้นโค้งความเร็วของการเปลี่ยนภาพ
คุณสมบัติtransition-timing-functionระบุเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลง
คุณสมบัติ Transition-timing-function สามารถมีค่าต่อไปนี้:
ease- ระบุเอฟเฟกต์การเปลี่ยนด้วยการเริ่มช้า จากนั้นเร็ว จากนั้นสิ้นสุดอย่างช้าๆ (นี่เป็นค่าเริ่มต้น)linear- ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบease-in- ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยการเริ่มช้าease-out- ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยการสิ้นสุดที่ช้าease-in-out- ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยการเริ่มและสิ้นสุดที่ช้าcubic-bezier(n,n,n,n)- ให้คุณกำหนดค่าของคุณเองในฟังก์ชันลูกบาศก์เบซิเยร์
ตัวอย่างต่อไปนี้แสดงเส้นโค้งความเร็วต่างๆ ที่สามารถใช้ได้:
ตัวอย่าง
#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 {
transition-delay: 1s;
}
การเปลี่ยนแปลง + การเปลี่ยนแปลง
ตัวอย่างต่อไปนี้เพิ่มเอฟเฟกต์การเปลี่ยนแปลงให้กับการแปลง:
ตัวอย่าง
div {
transition:
width 2s, height 2s, transform 2s;
}
ตัวอย่างการเปลี่ยนแปลงเพิ่มเติม
คุณสมบัติการเปลี่ยน CSS สามารถระบุได้ทีละรายการดังนี้:
ตัวอย่าง
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
หรือโดยใช้คุณสมบัติชวเลขtransition:
ตัวอย่าง
div
{
transition: width 2s linear 1s;
}
คุณสมบัติการเปลี่ยน CSS
ตารางต่อไปนี้แสดงรายการคุณสมบัติการเปลี่ยน CSS ทั้งหมด:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |