CSS3 Animation จะรองรับเว็บบราวเซอร์เวอร์ชั่นใหม่ๆ ของ Google Chrome,Firefox,Opera,Safari เป็นต้น ใครที่ยังใช้ IE6-7 อัพเดทด่วนเลย เพราะคุณจะไม่ได้สัมผัสถึงความสามารถที่เหนือชั้นของมัน
นการสร้างภาพเคลื่อนไหวด้วย CSS3 นั้นมีข้อดีในตัวของมันคือ ไม่กินทรัพยากรพื้นที่มาก และไม่ต้องติดตั้งปลั๊กอินเพิ่มเติม เหมือน Flash ทำให้ลดปัญหาเรื่องนี้ไปได้ แต่ก็มีข้อจำกัดของมันในการสร้างและแสดงผล
CSS
#box
{
width:100px; /* ความกว้าง */
height:100px; /* ความสูง */
background:#08CDD8; /* Code สี ที่ต้องการ */
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /*สำหรับ Firefox */
-webkit-animation:mymove 5s infinite; /* สำหรับ Safari และ Chrome*/
-o-animation:mymove 5s infinite; /*สำหรับ Opera*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /*สำหรับ Firefox */
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* สำหรับ Safari และ Chrome*/
{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes mymove /*สำหรับ Opera*/
{
from {left:0px;}
to {left:200px;}
}
HTML
<div id="box"></div>
อ้างอิง
--http://www.softmelt.com/article.php?id=450--