การกำหนด Keyframes ใน CSS3

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <style> 
body { 
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
} 
div { 
  width: 100px; 
  height: 100px; 
  background: red; 
  position: relative; 
  animation: colorChange 5s infinite; 
} 
@keyframes colorChange { 
  from { 
    background: red; 
    left: 0px; 
  } 
  to { 
    background: rgb(32, 229, 255); 
    left: 300px; 
  } 
} 
</style> </head> <body> <h1>การกำหนด keyframes ใน CSS</h1> <div></div> <h2>สี่เหลี่ยมด้านบนจะเปลี่ยนสีและตำแหน่งตามเวลา</h2> </body> </html>

ผลลัพธ์

กล่องสีแดงจะเคลื่อนที่ไปทางขวาและเปลี่ยนสีเป็นสีฟ้าอ่อนภายใน 5 วินาที แล้ววนซ้ำ

หลังจาก 5 วินาที ตำแหน่งและสีจะเปลี่ยนเป็นดังนี้