CSS3 ภาพเคลื่อนไหว
ภาพเคลื่อนไหว CSS3 ช่วยให้ภาพเคลื่อนไหวขององค์ประกอบ HTML มากที่สุดโดยไม่ต้องใช้ JavaScript หรือ Flash!
นิเมชั่น
สนับสนุนเบราว์เซอร์สำหรับภาพเคลื่อนไหว
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
สิ่งที่เป็นภาพเคลื่อนไหว CSS3?
ภาพเคลื่อนไหวที่ช่วยให้องค์ประกอบค่อยๆเปลี่ยนจากรูปแบบหนึ่งไปยังอีก
คุณสามารถเปลี่ยนคุณสมบัติ CSS มากเท่าที่คุณต้องการเป็นจำนวนมากเท่าที่คุณต้องการ
หากต้องการใช้ภาพเคลื่อนไหว CSS3 ก่อนอื่นคุณต้องระบุคีย์เฟรมบางอย่างสำหรับการเคลื่อนไหว
คีย์เฟรมถือสิ่งที่รูปแบบองค์ประกอบจะมีในบางช่วงเวลา
@keyframes กฎ
เมื่อคุณระบุรูปแบบ 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 สถานที่ให้บริการไม่ได้ระบุการเคลื่อนไหวจะไม่มีผลกระทบเพราะค่าเริ่มต้นคือ 0
ในตัวอย่างข้างต้นที่เราได้ระบุไว้เมื่อรูปแบบจะมีการเปลี่ยนแปลงโดยใช้คำหลักที่ "from" และ "to" (ซึ่งหมายถึง 0% (Start) และ 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;
} ลองตัวเอง» ตั้งหลายครั้งภาพเคลื่อนไหวควรใช้
animation-iteration-count คุณสมบัติระบุจำนวนครั้งที่ภาพเคลื่อนไหวควรเรียกใช้
ตัวอย่างต่อไปนี้จะทำงานนิเมชั่น 3 ครั้งก่อนที่จะหยุดการทำงาน:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} ลองตัวเอง» ตัวอย่างต่อไปนี้ใช้ค่า " infinite " เพื่อให้การเคลื่อนไหวยังคงอยู่เป็นนิตย์
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} ลองตัวเอง» เรียกนิเมชั่นในทิศทางที่ย้อนกลับหรือวงจรสำรอง
animation-direction คุณสมบัติถูกใช้เพื่อให้การดำเนินการภาพเคลื่อนไหวในทิศทางกลับกันหรือสลับรอบ
ตัวอย่างต่อไปนี้จะเรียกใช้ภาพเคลื่อนไหวในทิศทางที่ตรงกันข้าม:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} ลองตัวเอง» ตัวอย่างต่อไปนี้ใช้ค่า "alternate" ที่จะทำให้ภาพเคลื่อนไหวคนแรกที่วิ่งไปข้างหน้าแล้วย้อนกลับไปข้างหน้าแล้ว:
ตัวอย่าง
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} ลองตัวเอง» ระบุ Curve ความเร็วของนิเมชั่น
animation-timing-function คุณสมบัติที่ระบุโค้งความเร็วของภาพเคลื่อนไหว
สถานที่ให้บริการภาพเคลื่อนไหวการกำหนดเวลาการทำงานสามารถมีค่าต่อไปนี้:
-
ease- ระบุภาพเคลื่อนไหวกับการเริ่มต้นช้าแล้วอย่างรวดเร็วแล้วจบช้า (นี้เป็นค่าเริ่มต้น) -
linear- ระบุภาพเคลื่อนไหวด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบ -
ease-in- ระบุภาพเคลื่อนไหวที่มีการเริ่มต้นช้า -
ease-out- ระบุภาพเคลื่อนไหวที่มีปลายช้า -
ease-in-out- ระบุภาพเคลื่อนไหวที่มีการเริ่มต้นช้าและจุดสิ้นสุด -
cubic-bezier(n,n,n,n)- ช่วยให้คุณสามารถกำหนดค่าของคุณเองในฟังก์ชั่นลูกบาศก์ Bezier
ตัวอย่างต่อไปนี้แสดงให้เห็นบางส่วนของเส้นโค้งที่ความเร็วที่แตกต่างกันที่สามารถใช้:
ตัวอย่าง
#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;} ลองตัวเอง» แอนิเมชั่ชวเลขทรัพย์สิน
ตัวอย่างด้านล่างใช้หกของคุณสมบัติการเคลื่อนไหว:
ตัวอย่าง
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
ลองตัวเอง» ผลภาพเคลื่อนไหวที่เดียวกับข้างต้นสามารถทำได้โดยใช้ชวเลข animation ทรัพย์สิน:
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 »
CSS3 คุณสมบัตินิเมชั่น
ตารางต่อไปนี้แสดง @keyframes กฎและทุกคุณสมบัติการเคลื่อนไหว:
| คุณสมบัติ | ลักษณะ |
|---|---|
| @keyframes | ระบุรหัสภาพเคลื่อนไหว |
| animation | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทุกคุณสมบัติการเคลื่อนไหว |
| animation-delay | ระบุความล่าช้าสำหรับการเริ่มต้นของการเคลื่อนไหวที่ |
| animation-direction | ระบุว่าภาพเคลื่อนไหวควรจะเล่นในทิศทางกลับกันหรือสลับรอบ |
| animation-duration | ระบุวิธีการหลายวินาทีหรือมิลลิวินาทีภาพเคลื่อนไหวที่ใช้ในการครบรอบหนึ่งรอบ |
| animation-fill-mode | ระบุลักษณะองค์ประกอบเมื่อการเคลื่อนไหวไม่ได้เล่น (ตอนที่มันจะเสร็จสิ้นหรือเมื่อมีความล่าช้า) |
| animation-iteration-count | ระบุจำนวนครั้งที่เคลื่อนไหวควรจะเล่น |
| animation-name | ระบุชื่อของ @keyframes ภาพเคลื่อนไหว |
| animation-play-state | ระบุว่านิเมชั่นที่กำลังทำงานหรือหยุดชั่วคราว |
| animation-timing-function | ระบุโค้งความเร็วของภาพเคลื่อนไหว |