กฎCSS @keyframes
ตัวอย่าง
ทำให้องค์ประกอบค่อยๆ เลื่อนลงมา 200px:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
กฎ@keyframesระบุรหัสภาพเคลื่อนไหว
แอนิเมชั่นถูกสร้างขึ้นโดยค่อยๆ เปลี่ยนจากชุดสไตล์ CSS ชุดหนึ่งเป็นอีกชุดหนึ่ง
ในระหว่างภาพเคลื่อนไหว คุณสามารถเปลี่ยนชุดสไตล์ CSS ได้หลายครั้ง
ระบุเวลาที่จะเปลี่ยนรูปแบบเป็นเปอร์เซ็นต์ หรือใช้คีย์เวิร์ด "จาก" และ "ถึง" ซึ่งเท่ากับ 0% และ 100% 0% คือจุดเริ่มต้นของแอนิเมชั่น 100% คือเมื่อแอนิเมชั่นเสร็จสมบูรณ์
เคล็ดลับ:เพื่อการสนับสนุนเบราว์เซอร์ที่ดีที่สุด คุณควรกำหนดทั้งตัวเลือก 0% และ 100% เสมอ
หมายเหตุ:ใช้คุณสมบัติแอนิเมชั่นเพื่อควบคุมลักษณะที่ปรากฏของแอนิเมชั่น และเพื่อรวมแอนิเมชั่นกับตัวเลือก
หมายเหตุ:กฎ !important จะถูกละเว้นในคีย์เฟรม (ดูตัวอย่างสุดท้ายในหน้านี้)
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนกฎอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
| Property | |||||
|---|---|---|---|---|---|
| @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- |
ไวยากรณ์ CSS
@keyframes animationname {keyframes-selector {css-styles;}}
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพิ่มตัวเลือกคีย์เฟรมจำนวนมากในแอนิเมชั่นเดียว:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
ตัวอย่าง
เปลี่ยนสไตล์ CSS มากมายในแอนิเมชั่นเดียว:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
ตัวอย่าง
ตัวเลือกคีย์เฟรมจำนวนมากที่มีสไตล์ CSS มากมาย:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
ตัวอย่าง
หมายเหตุ:กฎ !important จะถูกละเว้นในคีย์เฟรม:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: ภาพเคลื่อนไหว CSS