CSS @keyframes rule sử dụng như thế nào ?

CSS @keyframes rule là một phần của CSS Animation, cho phép tạo ra các hiệu ứng chuyển động và biến đổi trên các phần tử HTML bằng cách định nghĩa các keyframe, tương tự như Frame trong Animation. Trong bài viết này, chúng ta sẽ đi vào chi tiết về CSS @keyframes rule, từ cú pháp, cách sử dụng, ưu và nhược điểm, lời khuyên và câu hỏi thường gặp.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS @keyframes rule là gì?

CSS @keyframes rule cho phép tạo ra các animation style và định nghĩa các keyframe để chỉ định trạng thái của phần tử HTML ở mỗi thời điểm được xác định bằng thời gian (timeline). Với CSS @keyframes rule, chúng ta có thể tạo ra những hiệu ứng chuyển động đơn giản hoặc phức tạp bằng cách chỉnh sửa các thuộc tính CSS tại các keyframe state.

Ai sẽ dùng CSS @keyframes rule

Đối với những lập trình viên web và designer, CSS @keyframes rule là một công cụ hữu ích để tạo ra các hiệu ứng chuyển động trên website của họ. Nó được sử dụng rộng rãi trong thiết kế web để tạo ra các hiệu ứng chuyển động, animation và biến đổi trên các phần tử HTML. Nó cũng được sử dụng để thêm tính năng tương tác cho website của bạn.

Hướng dẫn CSS @keyframes rule

Cú pháp

Để sử dụng keyframes, chúng ta cần tạo ra một @keyframes rule kèm theo thuộc tính animation-name để khớp với animation declaration của nó. Đây là cú pháp:

@keyframes animation-name {
   keyframes-selector {
      css-styles
   }
}

Trong đó:

• animation-name: Tên của animation, được đặt bởi người dùng.
• keyframes-selector: % thời gian trong animation khi keyframe xảy ra. Có thể sử dụng từ khóa ‘from’ (hoặc 0%) hoặc ‘to’ (hoặc 100%) hoặc giá trị % bất kỳ trong khoảng từ 0% đến 100%.
• css-styles: Định nghĩa một hoặc nhiều thuộc tính CSS style.

Keyframes timing function

Để điều chỉnh tốc độ chuyển động của animation, chúng ta có thể sử dụng các giá trị sau:

• linear: Chuyển động có tốc độ không đổi từ đầu đến cuối.
• ease: Chuyển động bắt đầu chậm, rồi tăng tốc trong một khoảng thời gian nhất định trước khi giảm tốc trước khi kết thúc.
• ease-in: Tương tự như ease, nhưng kết thúc nhanh hơn.
• ease-out: Tương tự như ease, nhưng bắt đầu nhanh hơn.

Ví dụ

Ví dụ sau sử dụng CSS @keyframes rule để tạo ra một animation đơn giản cho phần tử HTML:

/* Define the animation */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Apply the animation to the element */
div {
    animation-name: example;
    animation-duration: 4s;
}

Trong ví dụ này, chúng ta đã đ ịnh nghĩa một @keyframes rule với tên là “example”, chỉ định sự thay đổi màu sắc của phần tử từ đỏ sang vàng. Sau đó, chúng ta đã áp dụng animation này vào phần tử div bằng cách sử dụng thuộc tính animation-name.

Ví dụ sử dụng CSS @keyframes rule

CSS @keyframes rule là một quy tắc CSS cho phép bạn xác định các keyframe cho hoạt ảnh CSS của mình. Các keyframe là các điểm trong thời gian hoạt ảnh, mỗi keyframe xác định trạng thái của phần tử được hoạt hình tại thời điểm đó.

Để tạo một quy tắc @keyframes, bạn cần sử dụng từ khóa @keyframes theo sau là tên của keyframe. Sau đó, bạn có thể xác định các keyframe của mình bên trong dấu ngoặc nhọn. Mỗi keyframe được định nghĩa bằng một phần trăm, cho biết thời điểm trong hoạt ảnh keyframe xảy ra.

Dưới đây là một ví dụ về một quy tắc @keyframes đơn giản:

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 100px;
  }
}

Quy tắc @keyframes này sẽ di chuyển một phần tử từ vị trí trái sang phải trong 100% hoạt ảnh.

Bạn có thể sử dụng quy tắc @keyframes để tạo nhiều loại hoạt ảnh khác nhau. Ví dụ: bạn có thể sử dụng nó để thay đổi màu sắc, kích thước hoặc vị trí của một phần tử.

Dưới đây là một số ví dụ về cách sử dụng quy tắc @keyframes:

Để thay đổi màu sắc của một phần tử, bạn có thể sử dụng các keyframe sau:

@keyframes change-color {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

Quy tắc @keyframes này sẽ thay đổi màu sắc của một phần tử từ đỏ sang xanh lá cây sang xanh lam trong 100% hoạt ảnh.

Để thay đổi kích thước của một phần tử, bạn có thể sử dụng các keyframe sau:

@keyframes increase-size {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}

Quy tắc @keyframes này sẽ tăng kích thước của một phần tử từ 0px thành 100px trong 100% hoạt ảnh.

Để di chuyển một phần tử, bạn có thể sử dụng các keyframe sau:

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 100px;
  }
}

Quy tắc @keyframes này sẽ di chuyển một phần tử từ vị trí trái sang phải trong 100% hoạt ảnh.

Ưu và Nhược điểm CSS @keyframes rule

Ưu điểm

• Tạo ra những hiệu ứng chuyển động đẹp mắt cho website.
• Cung cấp khả năng tùy chỉnh cao cho các animation.
• Giúp tạo ra trải nghiệm tương tác cho người dùng.

Nhược điểm

• Có thể gây ảnh hưởng đến hiệu suất của website nếu sử dụng không đúng cách.
• Khả năng tương thích với các trình duyệt khác nhau có thể khác nhau.

Lời khuyên CSS @keyframes rule

Khi sử dụng CSS @keyframes rule, chúng ta cần lưu ý các điểm sau để đạt được hiệu quả tốt nhất:

• Sử dụng animation một cách hợp lý giúp tăng tính tương tác trên website.
• Đừng sử dụng quá nhiều animation hoặc animation phức tạp trên một trang web.
• Tối ưu hóa hiệu suất của website bằng cách sử dụng các phương pháp tối ưu hóa, như làm giảm số lượng image hoặc sử dụng các công cụ tối ưu hóa hình ảnh.