ภาพเคลื่อนไหว CSS
ภาพเคลื่อนไหว CSS
CSS ช่วยให้แอนิเมชั่นขององค์ประกอบ HTML โดยไม่ต้องใช้ JavaScript หรือ Flash!
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
รองรับเบราว์เซอร์สำหรับแอนิเมชั่น
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
ภาพเคลื่อนไหว CSS คืออะไร?
ภาพเคลื่อนไหวช่วยให้องค์ประกอบค่อยๆ เปลี่ยนจากรูปแบบหนึ่งเป็นอีกรูปแบบหนึ่ง
คุณสามารถเปลี่ยนคุณสมบัติ CSS ได้มากเท่าที่ต้องการ กี่ครั้งก็ได้ตามต้องการ
หากต้องการใช้ภาพเคลื่อนไหว CSS คุณต้องระบุคีย์เฟรมสำหรับภาพเคลื่อนไหวก่อน
คีย์เฟรมถือสไตล์ที่องค์ประกอบจะมีในบางช่วงเวลา
กฎ @คีย์เฟรม
เมื่อคุณระบุสไตล์ CSS ภายใน@keyframes
กฎ ภาพเคลื่อนไหวจะค่อยๆ เปลี่ยนจากสไตล์ปัจจุบันเป็นสไตล์ใหม่ในบางช่วงเวลา
เพื่อให้แอนิเมชั่นทำงาน คุณต้องผูกแอนิเมชั่นกับองค์ประกอบ
ตัวอย่างต่อไปนี้ผูกภาพเคลื่อนไหว "ตัวอย่าง" กับองค์ประกอบ <div> ภาพเคลื่อนไหวจะมีอายุ 4 วินาที และจะค่อยๆ เปลี่ยนสีพื้นหลังขององค์ประกอบ <div> จาก "สีแดง" เป็น "สีเหลือง"
ตัวอย่าง
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
หมายเหตุ:คุณสมบัติanimation-duration
กำหนดระยะเวลาที่แอนิเมชันควรใช้เวลานานเท่าใดจึงจะเสร็จสมบูรณ์ หากanimation-duration
ไม่ได้ระบุคุณสมบัติ ภาพเคลื่อนไหวจะไม่เกิดขึ้น เนื่องจากค่าเริ่มต้นคือ 0 วินาที (0 วินาที)
ในตัวอย่างข้างต้น เราได้ระบุเมื่อรูปแบบจะเปลี่ยนโดยใช้คำหลัก "จาก" และ "เป็น" (ซึ่งหมายถึง 0% (เริ่มต้น) และ 100% (สมบูรณ์))
นอกจากนี้ยังสามารถใช้เปอร์เซ็นต์ โดยใช้เปอร์เซ็นต์ คุณสามารถเพิ่มการเปลี่ยนแปลงสไตล์ได้มากเท่าที่คุณต้องการ
ตัวอย่างต่อไปนี้จะเปลี่ยนสีพื้นหลังขององค์ประกอบ <div> เมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 25%, สมบูรณ์ 50% และอีกครั้งเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 100%:
ตัวอย่าง
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
ตัวอย่างต่อไปนี้จะเปลี่ยนทั้งสีพื้นหลังและตำแหน่งขององค์ประกอบ <div> เมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 25%, สมบูรณ์ 50% และอีกครั้งเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 100%:
ตัวอย่าง
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
เลื่อนภาพเคลื่อนไหว
คุณสมบัติระบุ การanimation-delay
หน่วงเวลาสำหรับการเริ่มแอนิเมชัน
ตัวอย่างต่อไปนี้มีความล่าช้า 2 วินาทีก่อนเริ่มแอนิเมชัน:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
ค่าลบยังได้รับอนุญาต หากใช้ค่าลบ แอนิเมชั่นจะเริ่มราวกับว่ามันเล่นมาเป็นเวลาNวินาทีแล้ว
ในตัวอย่างต่อไปนี้ แอนิเมชั่นจะเริ่มราวกับว่ามันได้เล่นไปแล้ว 2 วินาที:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
กำหนดจำนวนครั้งที่แอนิเมชั่นควรรัน
คุณสมบัติanimation-iteration-count
ระบุจำนวนครั้งที่แอนิเมชั่นควรเรียกใช้
ตัวอย่างต่อไปนี้จะเรียกใช้ภาพเคลื่อนไหว 3 ครั้งก่อนที่จะหยุด:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
ตัวอย่างต่อไปนี้ใช้ค่า "อนันต์" เพื่อให้แอนิเมชั่นดำเนินต่อไปตลอดกาล:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
เรียกใช้แอนิเมชั่นในทิศทางย้อนกลับหรือวงจรสำรอง
คุณสมบัติanimation-direction
ระบุว่าควรเล่นภาพเคลื่อนไหวไปข้างหน้า ข้างหลัง หรือสลับกัน
คุณสมบัติทิศทางภาพเคลื่อนไหวสามารถมีค่าต่อไปนี้:
normal
- ภาพเคลื่อนไหวเล่นตามปกติ (ไปข้างหน้า) นี่คือค่าเริ่มต้นreverse
- ภาพเคลื่อนไหวเล่นในทิศทางย้อนกลับ (ย้อนกลับ)alternate
- ภาพเคลื่อนไหวจะเล่นไปข้างหน้าก่อนแล้วจึงย้อนกลับalternate-reverse
- แอนิเมชั่นจะเล่นย้อนกลับก่อนแล้วจึงไปข้างหน้า
ตัวอย่างต่อไปนี้จะเรียกใช้ภาพเคลื่อนไหวในทิศทางย้อนกลับ (ย้อนกลับ):
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
ตัวอย่างต่อไปนี้ใช้ค่า "ทางเลือก" เพื่อให้แอนิเมชั่นวิ่งไปข้างหน้าก่อน แล้วจึงย้อนกลับ:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
ตัวอย่างต่อไปนี้ใช้ค่า "alternate-reverse" เพื่อให้แอนิเมชั่นย้อนกลับก่อน แล้วจึงส่งต่อ:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
ระบุเส้นโค้งความเร็วของแอนิเมชัน
คุณสมบัติanimation-timing-function
ระบุเส้นโค้งความเร็วของภาพเคลื่อนไหว
คุณสมบัติ animation-timing-function สามารถมีค่าต่อไปนี้:
ease
- ระบุแอนิเมชั่นที่เริ่มช้า แล้วเร็ว แล้วจบอย่างช้าๆ (นี่เป็นค่าเริ่มต้น)linear
- ระบุภาพเคลื่อนไหวด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบease-in
- ระบุแอนิเมชั่นที่มีการเริ่มช้าease-out
- ระบุแอนิเมชั่นที่มีจุดจบช้าease-in-out
- ระบุแอนิเมชั่นที่มีการเริ่มและสิ้นสุดช้าcubic-bezier(n,n,n,n)
- ให้คุณกำหนดค่าของคุณเองในฟังก์ชันลูกบาศก์เบซิเยร์
ตัวอย่างต่อไปนี้แสดงเส้นโค้งความเร็วต่างๆ ที่สามารถใช้ได้:
ตัวอย่าง
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
ระบุโหมดเติมสำหรับแอนิเมชั่น
ภาพเคลื่อนไหว CSS จะไม่ส่งผลต่อองค์ประกอบก่อนที่จะเล่นคีย์เฟรมแรกหรือหลังจากเล่นคีย์เฟรมสุดท้าย คุณสมบัติโหมดเติมภาพเคลื่อนไหวสามารถแทนที่ลักษณะการทำงานนี้ได้
คุณสมบัติanimation-fill-mode
ระบุสไตล์สำหรับองค์ประกอบเป้าหมายเมื่อไม่ได้เล่นแอนิเมชั่น (ก่อนเริ่ม หลังสิ้นสุด หรือทั้งสองอย่าง)
คุณสมบัติโหมดเติมภาพเคลื่อนไหวสามารถมีค่าต่อไปนี้:
none
- ค่าเริ่มต้น แอนิเมชั่นจะไม่นำสไตล์ใดๆ ไปใช้กับองค์ประกอบก่อนหรือหลังการดำเนินการforwards
- องค์ประกอบจะคงค่ารูปแบบที่กำหนดโดยคีย์เฟรมสุดท้าย (ขึ้นอยู่กับทิศทางของภาพเคลื่อนไหวและจำนวนภาพเคลื่อนไหวซ้ำ)backwards
- องค์ประกอบจะได้รับค่ารูปแบบที่กำหนดโดยคีย์เฟรมแรก (ขึ้นอยู่กับทิศทางของภาพเคลื่อนไหว) และคงค่านี้ไว้ในช่วงระยะเวลาหน่วงของภาพเคลื่อนไหวboth
- แอนิเมชั่นจะทำตามกฎทั้งเดินหน้าและถอยหลัง ขยายคุณสมบัติของแอนิเมชั่นไปทั้งสองทิศทาง
ตัวอย่างต่อไปนี้ช่วยให้องค์ประกอบ <div> รักษาค่ารูปแบบจากคีย์เฟรมสุดท้ายเมื่อภาพเคลื่อนไหวสิ้นสุดลง:
ตัวอย่าง
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
ตัวอย่างต่อไปนี้ช่วยให้องค์ประกอบ <div> ได้รับค่ารูปแบบที่กำหนดโดยคีย์เฟรมแรกก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น (ในช่วงระยะเวลาหน่วงของภาพเคลื่อนไหว):
ตัวอย่าง
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
ตัวอย่างต่อไปนี้ช่วยให้องค์ประกอบ <div> ได้รับค่ารูปแบบที่กำหนดโดยคีย์เฟรมแรกก่อนที่ภาพเคลื่อนไหวจะเริ่มต้น และคงค่ารูปแบบจากคีย์เฟรมสุดท้ายไว้เมื่อภาพเคลื่อนไหวสิ้นสุด
ตัวอย่าง
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
แอนิเมชั่นชวเลขพร็อพเพอร์ตี้
ตัวอย่างด้านล่างใช้คุณสมบัติแอนิเมชั่นหกคุณสมบัติ:
ตัวอย่าง
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
เอฟเฟกต์แอนิเมชั่นแบบเดียวกับด้านบนสามารถทำได้โดยใช้
animation
คุณสมบัติชวเลข:
ตัวอย่าง
div
{
animation: example 5s linear 2s infinite alternate;
}
คุณสมบัติภาพเคลื่อนไหว CSS
ตารางต่อไปนี้แสดงรายการกฎ @keyframes และคุณสมบัติภาพเคลื่อนไหว CSS ทั้งหมด:
Property | Description |
---|---|
@keyframes | Specifies the animation code |
animation | A shorthand property for setting all the animation properties |
animation-delay | Specifies a delay for the start of an animation |
animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-duration | Specifies how long time an animation should take to complete one cycle |
animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-iteration-count | Specifies the number of times an animation should be played |
animation-name | Specifies the name of the @keyframes animation |
animation-play-state | Specifies whether the animation is running or paused |
animation-timing-function | Specifies the speed curve of the animation |