Thuộc tính CSS animation-fill-mode

animation-fill-mode

animation-fill-mode xác định kiểu dáng áp dụng cho phần tử **trước khi animation bắt đầu** và **sau khi animation kết thúc**.

Các giá trị

• none (mặc định): Không áp dụng kiểu nào ngoài thời gian chạy.
• forwards: Giữ kiểu của **keyframe cuối cùng** (100% / to) sau khi kết thúc.
• backwards: Áp dụng kiểu của **keyframe đầu tiên** (0% / from) ngay lập tức (trong khoảng delay), trước khi animation chạy.
• both: Kết hợp forwards và backwards.

Ví dụ: backwards

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background: red;
      animation-name: myanim;
      animation-duration: 2s;
      animation-delay: 1s; /* Delay 1s để thấy rõ backwards */
      animation-fill-mode: backwards; /* Áp dụng from keyframe ngay */
    }
    @keyframes myanim {
      from { left: 0px; background-color: green; }
      to   { left: 200px; background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Với backwards + delay: Div ngay lập tức có nền xanh (từ keyframe from) trong 1s delay, sau đó chạy animation sang xanh dương. Không có fill-mode: div đỏ gốc trong 1s đầu.