Định nghĩa Keyframes (khung khóa) trong CSS3

@keyframes định nghĩa các trạng thái trung gian của animation. Cú pháp: @keyframes name { from { } to { } } hoặc { 0% { } 50% { } 100% { } }.

Ví dụ

<!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 {
      0% { background: red; left: 0px; }
      25% { background: yellow; left: 100px; }
      50% { background: green; left: 200px; }
      75% { background: blue; left: 300px; }
      100% { background: rgb(32, 229, 255); left: 300px; }
    }
  </style>
</head>
<body>
  <h1>Định Nghĩa Keyframes Trong CSS</h1>
  <div></div>
  <h2>Hộp vuông sẽ đổi màu và di chuyển từ trái sang phải trong 5s, lặp vô hạn</h2>
</body>
</html>

Kết quả

Hộp vuông đỏ di chuyển từ trái sang phải 300px trong 5 giây, đồng thời đổi màu: đỏ → vàng → xanh lá → xanh dương → xanh nhạt, sau đó lặp lại.

Thuộc tính animation

animation: name duration timing-function delay iteration-count direction fill-mode;
/* Ví dụ: */
animation: colorChange 5s ease-in-out 1s infinite alternate both;

• alternate: chạy xuôi rồi ngược
• both: giữ trạng thái đầu/cuối khi không chạy