Rate this post

Thuộc tính animation trong CSS được sử dụng để tạo các hiệu ứng hoạt hình trên các thành phần HTML. Thuộc tính này là một tắt từ của nhiều thuộc tính hoạt hình CSS khác, bao gồm animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-countanimation-direction.

Các bài viết liên quan:

Thuộc tính animation cần nhiều giá trị, mô tả như sau:

  1. animation-name: Tên của hoạt hình @keyframes.
  2. animation-duration: Thời gian mà hoạt hình sẽ hoàn thành một chu kỳ.
  3. animation-timing-function: Hàm thời gian mà xác định cách hoạt hình sẽ tiến triển trong thời gian.
  4. animation-delay: Thời gian trễ trước khi hoạt hình bắt đầu.
  5. animation-iteration-count: Số lần hoạt hình sẽ lặp lại.
  6. animation-direction: Hướng của hoạt hình.

Ví dụ:

animation: slidein 5s ease-in-out 2s infinite;

Ví dụ này tạo ra một hoạt hình có tên “slidein”, với thời gian trình diễn là 5 giây, kiểu dịch chuyển “ease-in-out”, thời gian chờ là 2 giây và sẽ lặp lại vô hạn.

Bạn cũng có thể sử dụng animation-fill-modeanimation-play-state để kiểm soát trạng thái của hoạt hình trước và sau khi chạy.

Thuộc tính animation cho phép bạn thêm hiệu ứng động vào trang web của bạn, khiến chúng trở nên hấp dẫn và tương tác hơn.

Lưu ý rằng một số trình duyệt cũ hơn không hỗ trợ thuộc tính animation, bạn có thể sử dụng một số thư viện như Animate.css, W3.CSS để bật hỗ trợ cho các trình duyệt cũ hơn.

Một số ví dụ về animation trong css

  1. Làm mờ hiện thị một thành phần:
/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animation */
.fade-in {
  animation: fadeIn 1s ease-in;
}

Ví dụ này tạo ra một hoạt hình keyframe có tên “fadeIn” mà thay đổi độ mờ của một thành phần từ 0 đến 1 trong khoảng 1 giây với hàm thời gian ease-in. Sau đó lớp .fade-in được sử dụng để áp dụng hoạt hình cho thành phần.

  1. Di chuyển một thành phần:
/* Keyframes */
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

/* Animation */
.move {
  animation: move 2s ease-out;
}

Ví dụ này tạo ra một hoạt hình keyframe có tên “move” mà di chuyển một thành phần từ vị trí ban đầu của nó đến 100px sang bên phải trong vòng 2 giây với hàm thời gian ease-out. Sau đó lớp .move được sử dụng để áp dụng hoạt hình cho thành phần.

  1. Xoay một thành phần:
/* Keyframes */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation */
.rotate {
  animation: rotate 4s linear infinite;
}

Ví dụ này tạo ra một hoạt hình keyframe có tên “rotate” mà xoay một thành phần từ 0 độ đến 360 độ trong vòng 4 giây với hàm thời gian linear và lặp lại vô hạn. Sau đó lớp .rotate được sử dụng để áp dụng hoạt hình cho thành phần.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now