Thiết lập style cho phần tử khi animation không chạy (animation-fill-mode)

Thuộc tính animation-fill-mode

animation-fill-mode xác định **style của phần tử trước khi animation bắt đầu** và **sau khi animation kết thúc**. Mặc định animation không ảnh hưởng style ngoài thời gian chạy.

Các giá trị

Ví dụ: backwards (style trước khi chạy)

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background: red;           /* Style mặc định */
      animation-name: myanim;
      animation-duration: 2s;
      animation-fill-mode: backwards; /* Quan trọng */
      animation-delay: 2s;       /* Delay để quan sát rõ */
    }
    @keyframes myanim {
      from { left: 0px; background-color: green; }  /* Style tại 0% */
      to { left: 200px; background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
  <p>Div sẽ có background xanh (từ keyframe 0%) ngay lập tức, chờ 2s rồi animation chạy.</p>
</body>
</html>

Ví dụ: forwards (giữ style cuối)

div {
  animation-fill-mode: forwards;
  /* Sau 2s: div giữ left: 200px, background: blue */
}

Ví dụ: both (cả hai)

div {
  animation-fill-mode: both;
  animation-delay: 1s;
  /* 0-1s: style từ 0% (green, left:0)
     1-3s: animation chạy
     3s+ : giữ style từ 100% (blue, left:200px) */
}

Ứng dụng thực tế

• forwards: Button loading → giữ trạng thái "Done" sau khi xong.
• backwards: Modal delayed show → đã có style 0% (scale 0, opacity 0) trước khi chạy.
• both: Slide show - item chờ đợi đã ẩn, sau khi xong giữ hiển thị.

Lưu ý

animation-fill-mode không tác động đến animation-delay âm. Với delay âm, animation bắt đầu ngay tại điểm đó trong chu kỳ.