CSS Animatable
ความหมายและการใช้งาน
คุณสมบัติ CSSบางอย่างสามารถเคลื่อนไหวได้ ซึ่งหมายความว่าสามารถใช้ในแอนิเมชั่นและทรานซิชันได้
คุณสมบัติที่เคลื่อนไหวได้สามารถค่อยๆ เปลี่ยนจากค่าหนึ่งไปอีกค่าหนึ่ง เช่น ขนาด ตัวเลข เปอร์เซ็นต์ และสี
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนภาพเคลื่อนไหว CSS อย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
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 mymove
{
from {background-color: red;}
to {background-color: blue;}
}
คุณสมบัติเคลื่อนไหว
คุณสมบัติเหล่านี้เคลื่อนไหว ได้ ใน CSS: