ตัวอย่าง
ทำให้องค์ประกอบย้ายค่อยๆ 200px ลง:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
กฎ @keyframes ระบุรหัสภาพเคลื่อนไหว
ภาพเคลื่อนไหวที่ถูกสร้างขึ้นโดยค่อยๆเปลี่ยนจากหนึ่งชุดของรูปแบบ CSS ไปยังอีก
ในระหว่างนิเมชั่นที่คุณสามารถเปลี่ยนชุดของรูปแบบ CSS หลายต่อหลายครั้ง
ระบุเมื่อมีการเปลี่ยนแปลงรูปแบบที่จะเกิดขึ้นในร้อยละหรือคำหลักที่ "from" และ "to" ซึ่งเป็นเช่นเดียวกับ 0% และ 100% 0% เป็นจุดเริ่มต้นของการเคลื่อนไหวที่ 100% คือเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์
เคล็ดลับ: สำหรับการสนับสนุนเบราว์เซอร์ที่ดีที่สุดคุณควรกำหนดทั้ง 0% และ 100% เตอร์
Note: ใช้คุณสมบัติการเคลื่อนไหวเพื่อควบคุมลักษณะของภาพเคลื่อนไหวและยังผูกนิเมชั่นที่จะเตอร์
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่กฎ
ตามด้วยหมายเลข -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- |
CSS ไวยากรณ์
@keyframesanimationname {keyframes-selector {css-styles;}}ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| animationname | จำเป็นต้องใช้ กำหนดชื่อของภาพเคลื่อนไหว |
| keyframes-selector | จำเป็นต้องใช้ ร้อยละของระยะเวลาในการเคลื่อนไหว ค่าทางกฎหมาย: 0-100% Note: คุณสามารถมีหลายคีย์เฟรม-เตอร์ในหนึ่งภาพเคลื่อนไหว |
| css-styles | จำเป็นต้องใช้ หนึ่งหรือมากกว่าหนึ่งคุณสมบัติของสไตล์ CSS ทางกฎหมาย |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพิ่มเตอร์คีย์เฟรมหลายอย่างในหนึ่งภาพเคลื่อนไหว:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
ลองตัวเอง» ตัวอย่าง
เปลี่ยนรูปแบบ CSS จำนวนมากในหนึ่งภาพเคลื่อนไหว:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
ลองตัวเอง» ตัวอย่าง
เตอร์คีย์เฟรมหลายคนที่มีรูปแบบ CSS หลาย
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 ภาพเคลื่อนไหว