CSS Animations là một công cụ mạnh mẽ giúp bạn tạo ra các hiệu ứng chuyển động mượt mà và sinh động trên trang web mà không cần sử dụng JavaScript. CSS Animations cho phép bạn làm các phần tử di chuyển, thay đổi hình dạng, màu sắc và nhiều hơn nữa thông qua các bước chuyển tiếp được xác định trước. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng các thuộc tính @keyframes, animation-name, animation-duration, animation-timing-function và nhiều tùy chọn khác để tạo ra các hiệu ứng đẹp mắt.

Đây là một phần trong chuỗi bài học CSS trên "codetuthub.com", nơi bạn có thể tìm thấy các bài học liên quan như CSS Transitions, CSS Keyframes, và CSS 3D Transforms.

1. Tổng quan về CSS Animations

CSS Animations được xây dựng bằng cách sử dụng @keyframes, nơi bạn có thể xác định các bước thay đổi cụ thể trong suốt thời gian của hiệu ứng. Sau khi định nghĩa các bước chuyển đổi, bạn áp dụng hiệu ứng vào phần tử mong muốn bằng cách sử dụng các thuộc tính animation.

Cấu trúc

  1. Định nghĩa @keyframes: Chỉ định các bước của hiệu ứng chuyển động.
  2. Áp dụng các thuộc tính animation: Kết hợp animation-name, animation-duration, và các thuộc tính khác để tạo hiệu ứng hoàn chỉnh.

2. Thuộc tính @keyframes trong CSS

@keyframes là nơi bạn định nghĩa các trạng thái của hiệu ứng chuyển động. Bạn có thể chỉ định các phần trăm (0%, 50%, 100%) để kiểm soát chi tiết các bước chuyển đổi.

Cú pháp

css
@keyframes animation-name {
    0% { /* Bắt đầu hiệu ứng */ }
    50% { /* Trạng thái giữa */ }
    100% { /* Kết thúc hiệu ứng */ }
}

Ví dụ tạo hiệu ứng thay đổi màu sắc

css
@keyframes color-change {
    0% { background-color: #3498db; }
    50% { background-color: #2ecc71; }
    100% { background-color: #e74c3c; }
}

Trong ví dụ này, hiệu ứng sẽ chuyển màu nền của phần tử từ xanh lam sang xanh lá rồi đỏ.

3. Các thuộc tính của CSS Animations

3.1 Animation-name

animation-name chỉ định tên của @keyframes sẽ áp dụng cho phần tử.

css
.box {
    animation-name: color-change;
}

3.2 Animation-duration

animation-duration xác định thời gian để hoàn tất hiệu ứng, có thể là giây (s) hoặc mili giây (ms).

css
.box {
    animation-duration: 2s; /* 2 giây */
}

3.3 Animation-timing-function

animation-timing-function kiểm soát tốc độ của hiệu ứng trong suốt quá trình diễn ra.

Các giá trị phổ biến:

  • ease: Tăng tốc và giảm tốc.
  • linear: Tốc độ không đổi.
  • ease-in: Tăng tốc dần.
  • ease-out: Giảm tốc dần.
  • ease-in-out: Tăng tốc và giảm tốc.

Ví dụ:

css
.box {
    animation-timing-function: ease-in-out;
}

3.4 Animation-delay

animation-delay chỉ định độ trễ trước khi bắt đầu hiệu ứng, có thể là giây hoặc mili giây.

css
.box {
    animation-delay: 0.5s;
}

3.5 Animation-iteration-count

animation-iteration-count xác định số lần lặp lại của hiệu ứng.

  • 1: Lặp lại 1 lần (mặc định).
  • infinite: Lặp lại vô hạn.
css
.box {
    animation-iteration-count: infinite;
}

3.6 Animation-direction

animation-direction chỉ định hướng của hiệu ứng:

  • normal: Phát theo thứ tự từ 0% đến 100%.
  • reverse: Phát ngược từ 100% đến 0%.
  • alternate: Phát xuôi, sau đó ngược.
  • alternate-reverse: Phát ngược, sau đó xuôi.
css
.box {
    animation-direction: alternate;
}

3.7 Animation-fill-mode

animation-fill-mode chỉ định trạng thái của phần tử sau khi hoàn tất hoặc trước khi bắt đầu hiệu ứng.

  • none: Không giữ lại trạng thái của hiệu ứng.
  • forwards: Giữ trạng thái cuối cùng sau khi hoàn tất.
  • backwards: Áp dụng trạng thái đầu tiên ngay từ lúc chờ hiệu ứng.
  • both: Áp dụng cả trạng thái đầu và cuối.
css
.box {
    animation-fill-mode: forwards;
}

4. Ví dụ minh họa CSS Animations

4.1 Hiệu ứng nhấp nháy

css
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blinking {
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

Trong ví dụ này, .blinking sẽ thay đổi độ trong suốt để tạo hiệu ứng nhấp nháy lặp lại liên tục.

4.2 Hiệu ứng di chuyển

css
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.moving-box {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

Ở đây, phần tử .moving-box sẽ di chuyển 100px sang phải và quay về vị trí cũ, lặp lại liên tục.

4.3 Hiệu ứng xoay 360 độ

css
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotating {
    animation-name: rotate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

Phần tử .rotating sẽ xoay liên tục 360 độ quanh trục của nó, tạo hiệu ứng xoay vô hạn.

5. Kết hợp nhiều thuộc tính với animation shorthand

CSS cung cấp cú pháp viết gọn để kết hợp nhiều thuộc tính animation trong một dòng.

Cú pháp shorthand

css
animation: name duration timing-function delay iteration-count direction fill-mode;

Ví dụ sử dụng shorthand

css
.shorthand-example {
    animation: slide 3s ease-in-out 0.5s infinite alternate forwards;
}

Trong ví dụ này, phần tử .shorthand-example sẽ thực hiện hiệu ứng slide trong 3 giây, với đường cong ease-in-out, chờ 0.5 giây trước khi bắt đầu, lặp lại vô hạn, đảo chiều và giữ trạng thái cuối cùng.

6. Ứng dụng CSS Animations trong thiết kế

6.1 Tạo hiệu ứng hover cho nút bấm

Sử dụng animation để tạo hiệu ứng khi di chuột qua nút bấm.

css
@keyframes button-hover {
    0% { background-color: #3498db; }
    100% { background-color: #2ecc71; }
}

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    animation-name: button-hover;
    animation-duration: 0.3s;
}

.button:hover {
    animation-play-state: running;
}

6.2 Hiệu ứng lặp lại cho biểu tượng tải (Loading Icon)

css
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-icon {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

7. Kết luận

CSS Animations là công cụ mạnh mẽ để tạo ra các hiệu ứng chuyển động hấp dẫn và chuyên nghiệp mà không cần đến JavaScript. Từ các hiệu ứng đơn giản như nhấp nháy, di chuyển đến các hiệu ứng phức tạp khi kết hợp nhiều thuộc tính, CSS Animations giúp bạn mang lại trải nghiệm người dùng tốt hơn. Để tìm hiểu thêm về cách tạo các hiệu ứng động, bạn có thể xem thêm các bài học khác trên "codetuthub.com" như CSS Keyframes, CSS 3D Transforms, và CSS Transitions.