CSS không chỉ là công cụ để định dạng và trang trí giao diện trang web mà còn là một cách mạnh mẽ để tạo ra các hiệu ứng hoạt hình thú vị mà không cần sử dụng JavaScript. Animation trong CSS cho phép bạn tạo ra các hiệu ứng động mượt mà và hấp dẫn, từ chuyển động nhẹ nhàng cho đến các hiệu ứng phức tạp. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Animation trong CSS thông qua các ví dụ cụ thể.

1. Khái niệm về Animation trong CSS

Trước khi đi sâu vào các ví dụ cụ thể, hãy xem xét cách CSS Animation hoạt động. Để tạo một Animation trong CSS, bạn cần xác định một @keyframes rule và áp dụng nó cho một phần tử HTML bằng cách sử dụng thuộc tính animation. Mỗi @keyframes rule xác định các bước của Animation từ trạng thái ban đầu đến trạng thái cuối cùng.

2. Quy tắc keyframe Animation trong CSS

Trong CSS, @keyframes là quy tắc quan trọng cho Animation. Nó xác định các bước của Animation từ trạng thái ban đầu đến trạng thái cuối cùng. Mỗi keyframe trong quy tắc này đại diện cho một phần trăm thời gian của Animation và định nghĩa các thuộc tính CSS mà phần tử sẽ có tại thời điểm đó.

  • Cú pháp của @keyframes:
@keyframes animationName {
  0% {
    /* CSS properties at the start of the animation */
  }
  50% {
    /* CSS properties in the middle of the animation */
  }
  100% {
    /* CSS properties at the end of the animation */
  }
}

Các Thuộc Tính Chi Tiết của Animation trong CSS:

  • animation-name: Xác định tên của Animation được định nghĩa trong @keyframes.
  • animation-duration: Độ dài thời gian của Animation.
  • animation-timing-function: Định nghĩa cách Animation thay đổi qua thời gian (ví dụ: linear, ease-in, ease-out, ease-in-out).
  • animation-delay: Xác định thời gian chờ trước khi bắt đầu Animation.
  • animation-iteration-count: Xác định số lần lặp lại của Animation hoặc giá trị infinite cho lặp vô hạn.
  • animation-direction: Định nghĩa hướng của Animation (ví dụ: normal, reverse, alternate).
  • animation-fill-mode: Xác định trạng thái của phần tử trước và sau khi Animation chạy (ví dụ: forwards, backwards, both).
  • animation-play-state: Điều khiển trạng thái hoạt động của Animation (ví dụ: running, paused).

Sử dụng các thuộc tính này cùng với @keyframes, chúng ta có thể tạo ra các Animation phong phú và đa dạng mà không cần sử dụng JavaScript.

3. Thuộc tính animation-name Animation trong CSS

Thuộc tính animation-name xác định tên của Animation được định nghĩa trong @keyframes.

Ví dụ:

.animation {
  animation-name: move;
}

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

Trong ví dụ này, Animation có tên là move được định nghĩa trong @keyframes và được áp dụng cho phần tử có class là .animation.

4. Thuộc tính animation-duration Animation trong CSS

Thuộc tính animation-duration xác định độ dài thời gian của Animation.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s; /* Animation lasts for 2 seconds */
}

Trong ví dụ này, Animation có tên là move sẽ kéo dài trong thời gian 2 giây.

5. Thuộc tính animation-timing-function Animation trong CSS

Thuộc tính animation-timing-function định nghĩa cách Animation thay đổi qua thời gian.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; /* Animation starts slowly, speeds up, then slows down at the end */
}

Trong ví dụ này, Animation sẽ bắt đầu chậm, tăng tốc, sau đó chậm lại vào cuối.

6. Thuộc tính animation-delay Animation trong CSS

Thuộc tính animation-delay xác định thời gian chờ trước khi bắt đầu Animation.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-delay: 1s; /* Animation starts after 1 second delay */
}

Trong ví dụ này, Animation sẽ bắt đầu sau một thời gian chờ là 1 giây.

7. Thuộc tính animation-iteration-count Animation trong CSS

Thuộc tính animation-iteration-count xác định số lần lặp lại của Animation hoặc giá trị infinite cho lặp vô hạn.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 3; /* Animation repeats 3 times */
}

Trong ví dụ này, Animation sẽ lặp lại 3 lần.

8. Thuộc tính animation-direction Animation trong CSS

Thuộc tính animation-direction định nghĩa hướng của Animation.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-direction: alternate; /* Animation plays forwards then backwards */
}

Trong ví dụ này, Animation sẽ chạy xuôi rồi chạy ngược lại.

9. Thuộc tính animation-fill-mode Animation trong CSS

Thuộc tính animation-fill-mode xác định trạng thái của phần tử trước và sau khi Animation chạy.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* Phần tử giữ lại trạng thái cuối cùng sau khi kết thúc Animation */
}

Trong ví dụ này, phần tử sẽ giữ lại trạng thái cuối cùng của Animation sau khi kết thúc.

10. Thuộc tính animation-play-state Animation trong CSS

Thuộc tính animation-play-state điều khiển trạng thái hoạt động của Animation.

Ví dụ:

.animation {
  animation-name: move;
  animation-duration: 2s;
  animation-play-state: paused; /* Animation starts in paused state */
}

Trong ví dụ này, Animation sẽ bắt đầu trong trạng thái tạm dừng.

Tổng kết

Animation trong CSS mở ra một thế giới mới của sự sáng tạo trong thiết kế web. Từ các hiệu ứng đơn giản đến các hoạt hình phức tạp, bạn có thể thể hiện ý tưởng của mình một cách linh hoạt và hấp dẫn chỉ bằng cách sử dụng CSS. Hãy thử áp dụng Animation vào dự án của bạn và khám phá sức mạnh của nó!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Banner bottom