Làm chủ animation-fill-mode trong CSS: Kiểm soát trạng thái animation!

Bạn muốn kiểm soát chính xác trạng thái của phần tử sau khi animation kết thúc? Hãy cùng khám phá thuộc tính animation-fill-mode trong CSS. Thuộc tính này cho phép bạn xác định cách phần tử được tạo kiểu trước và sau khi animation chạy. Điều này giúp tạo ra các hiệu ứng mượt mà và chuyên nghiệp hơn cho website của bạn. Bạn có thể xem thêm kiến thức về CSS tại đây.

animation-fill-mode là gì?

animation-fill-mode là một thuộc tính CSS quan trọng. Nó quyết định cách các kiểu của animation được áp dụng cho một phần tử. Điều này xảy ra trước khi animation bắt đầu hoặc sau khi nó kết thúc. Nó giúp tránh tình trạng phần tử "nhảy về" trạng thái ban đầu sau khi animation hoàn thành.

Các giá trị của animation-fill-mode

Thuộc tính animation-fill-mode chấp nhận một số giá trị khác nhau. Mỗi giá trị sẽ tạo ra một hiệu ứng khác nhau. Chúng ta sẽ đi sâu vào từng giá trị để hiểu rõ hơn:

• none: Đây là giá trị mặc định. Animation không ảnh hưởng đến kiểu dáng của phần tử trước hoặc sau khi chạy.
• forwards: Phần tử giữ lại kiểu dáng cuối cùng được áp dụng bởi animation. Kiểu dáng này sẽ được giữ sau khi animation kết thúc.
• backwards: Phần tử áp dụng kiểu dáng đầu tiên được định nghĩa trong animation. Kiểu dáng này được áp dụng trước khi animation bắt đầu.
• both: Kết hợp cả forwards và backwards . Phần tử áp dụng kiểu dáng đầu tiên trước khi animation bắt đầu. Sau đó, nó giữ lại kiểu dáng cuối cùng sau khi animation kết thúc.
• initial: Đặt thuộc tính về giá trị mặc định ban đầu.
• inherit: Kế thừa giá trị của thuộc tính từ phần tử cha.

Ví dụ minh họa animation-fill-mode

Để hiểu rõ hơn cách hoạt động của animation-fill-mode , chúng ta hãy xem một ví dụ cụ thể. Giả sử chúng ta có một phần tử div với một animation đơn giản:

div { width: 100px; height: 100px; background-color: red; animation-name: changeColor; animation-duration: 2s; animation-iteration-count: 1; } @keyframes changeColor { from {background-color: red;} to {background-color: blue;} }

Trong ví dụ này, phần tử div sẽ chuyển từ màu đỏ sang màu xanh lam trong vòng 2 giây. Nếu chúng ta không sử dụng animation-fill-mode , phần tử sẽ trở lại màu đỏ sau khi animation kết thúc.

Sử dụng animation-fill-mode: forwards

Nếu chúng ta thêm animation-fill-mode: forwards; vào định nghĩa CSS, phần tử sẽ giữ lại màu xanh lam sau khi animation kết thúc:

div { width: 100px; height: 100px; background-color: red; animation-name: changeColor; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes changeColor { from {background-color: red;} to {background-color: blue;} }

Sử dụng animation-fill-mode: backwards

Nếu chúng ta thêm animation-fill-mode: backwards; vào định nghĩa CSS, phần tử sẽ bắt đầu với màu xanh lam trước khi animation bắt đầu (nếu có delay):

div { width: 100px; height: 100px; background-color: red; animation-name: changeColor; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: backwards; } @keyframes changeColor { from {background-color: red;} to {background-color: blue;} }

Sử dụng animation-fill-mode: both

Nếu chúng ta thêm animation-fill-mode: both; vào định nghĩa CSS, phần tử sẽ bắt đầu với màu xanh lam (nếu có delay), và giữ lại màu xanh lam sau khi animation kết thúc:

div { width: 100px; height: 100px; background-color: red; animation-name: changeColor; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: both; } @keyframes changeColor { from {background-color: red;} to {background-color: blue;} }

Khi nào nên sử dụng animation-fill-mode?

Sử dụng animation-fill-mode khi bạn muốn kiểm soát trạng thái của phần tử trước hoặc sau khi animation. Điều này đặc biệt hữu ích khi bạn có các animation phức tạp. Nó cũng hữu ích khi bạn muốn tạo ra các hiệu ứng chuyển tiếp mượt mà.

Các trường hợp sử dụng phổ biến

• Hiệu ứng hover: Sử dụng animation-fill-mode: forwards; để giữ hiệu ứng hover sau khi chuột rời khỏi phần tử.
• Hiệu ứng tải trang: Sử dụng animation-fill-mode: backwards; để hiển thị một trạng thái ban đầu trước khi animation tải trang bắt đầu.
• Chuyển đổi trạng thái: Sử dụng animation-fill-mode: both; để đảm bảo rằng phần tử luôn ở trạng thái mong muốn.

Kết luận

animation-fill-mode là một thuộc tính CSS mạnh mẽ. Nó cho phép bạn kiểm soát trạng thái của phần tử trước và sau khi animation chạy. Bằng cách hiểu rõ các giá trị và cách sử dụng của nó, bạn có thể tạo ra các hiệu ứng animation chuyên nghiệp và mượt mà hơn cho website của mình. Đừng ngần ngại thử nghiệm và khám phá các khả năng khác nhau của thuộc tính này. Bạn có thể tìm hiểu thêm về [CSS là gì?] để nắm vững kiến thức hơn.