54. Animation trong CSS

Animation trong CSS: bạn có thể tạo các hiệu ứng động bằng cách sử dụng @keyframes để định nghĩa một loạt các trạng thái và sự thay đổi giữa chúng. Đây là một ví dụ cơ bản về cách sử dụng @keyframes để tạo hiệu ứng animation trong CSS:

css

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.animation-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 2s ease-in-out infinite alternate;
}

Trong ví dụ này, chúng ta đang tạo một animation có tên là “slide”. Animation này diễn ra từ trạng thái ban đầu (from) với giá trị transform là translateX(0) đến trạng thái cuối cùng (to) với giá trị transform là translateX(100px).

• animation: slide 2s ease-in-out infinite alternate; áp dụng animation “slide” lên phần tử có class .animation-box. Animation này sẽ diễn ra trong vòng 2 giây với kiểu chuyển đổi ease-in-out và lặp vô hạn với hiệu ứng thay đổi ngược lại (“alternate”).

Một số điều cần lưu ý:

• @keyframes là một cách để định nghĩa một loạt các trạng thái của animation, từ trạng thái ban đầu (from) đến trạng thái cuối cùng (to), và bất kỳ trạng thái nào trong giữa.
• animation là thuộc tính để áp dụng animation vào một phần tử. Bạn có thể đặt tên animation, thời gian diễn ra, kiểu chuyển đổi, số lần lặp, và nhiều tùy chọn khác.

Bằng cách sử dụng @keyframes và animation, bạn có thể tạo ra các hiệu ứng động phức tạp và đa dạng để làm cho trang web của bạn thú vị hơn.