CSS3 Animation @keyframes - ควบคุมขั้นตอนกลางของอนิเมชัน

Keyframes (เฟรมสำคัญ) ควบคุมขั้นตอนกลางของอนิเมชันใน CSS3

ตัวอย่างแสดง height, width, color, name, และ duration ของอนิเมชันพร้อมไวยากรณ์ keyframes:

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