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-count và animation-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:

animation-name: Tên của animation cần áp dụng.
animation-duration: Thời gian để hoàn thành animation (tính bằng giây hoặc mili giây).
animation-timing-function: Chỉ định cách mà animation chuyển động (ví dụ: đều, chậm dần, nhanh dần, …).
animation-delay: Thời gian chờ trước khi bắt đầu animation.
animation-iteration-count: Số lần lặp lại animation.
animation-direction: Hướng của animation (ví dụ: tới lui, lùi tới, …).
animation-fill-mode: Chỉ định trạng thái của phần tử khi animation kết thúc.
animation-play-state: Chỉ định trạng thái của animation (ví dụ: đang chạy, dừng, …).

Để tạo một animation đơn giản, ta có thể sử dụng cú pháp sau:

@keyframes animation-name {
  from {
    /* Trạng thái bắt đầu của phần tử */
  }
  to {
    /* Trạng thái kết thúc của phần tử */
  }
}

Ví dụ, để tạo một animation đơn giản cho một đối tượng <div> di chuyển từ vị trí ban đầu sang vị trí mới, ta có thể sử dụng đoạn mã CSS sau:

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

div {
  animation-name: move;
  animation-duration: 2s;
}

Trong đoạn mã này, animation có tên là move sẽ được áp dụng cho các phần tử <div>. Thời gian để hoàn thành animation là 2 giây. Animation sẽ di chuyển phần tử <div> từ vị trí ban đầu sang vị trí mới ở bên phải 100px.

Xem thêm CSS Transform và Transitions

Ngoài ra, CSS còn cung cấp nhiều tính năng khác để tạo ra các hiệu ứng động phức tạp hơn như: transition, transform, perspective, … Việc sử dụng các tính năng này đòi hỏi sự hiểu biết chuyên sâu về CSS, tuy nhiên, chúng cũng rất hữu ích để tạo ra các hiệu ứng động đẹp mắt cho website.

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-mode và animation-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.

Xem thêm Date và time trong JavaScript

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

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.

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.

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.

Xem thêm Time trong Go

CSS

Animation trong CSS

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

Trả lời Hủy