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