CSS3 นิเมชั่น @keyframes

คีย์เฟรมควบคุมขั้นตอนของแอนิเมชั่นระดับกลางใน CSS3

เรามาดูตัวอย่างการแสดงความสูง ความกว้าง สี ชื่อ และระยะเวลาของแอนิเมชั่นพร้อมไวยากรณ์คีย์เฟรม

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}