ในการสร้าง Keyframe Animations ใน CSS3 ให้กำหนด Keyframe แต่ละเฟรม Keyframes จะควบคุมขั้นตอนกลางของแอนิเมชันใน CSS3
นี่คือการสร้าง Keyframe Animations โดยใช้ CSS3 −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: rgb(218, 78, 36); border: 4px solid rgb(0, 0, 0); position: relative; animation: circleMove 5s infinite; } @keyframes circleMove { from { left: 0px; border-radius: 0px; } to { left: 200px; border-radius: 50%; } } </style> </head> <body> <h1>CSS3 keyframe example</h1> <div></div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
หลังจากสักครู่ สี่เหลี่ยมจะกลายเป็นวงกลมดังภาพ −
