Bài 26.5: Bài tập thực hành animations

Chào mừng các bạn đến với bài thực hành animations trong CSS! Sau khi đã tìm hiểu về các khái niệm và cú pháp cơ bản của CSS animations (quy tắc @keyframes và các thuộc tính animation-*), đây là lúc chúng ta xắn tay áo lên và áp dụng kiến thức đó để tạo ra những hiệu ứng chuyển động sống động cho giao diện web của mình.

Animations không chỉ làm cho trang web của bạn trông thú vị và hiện đại hơn, mà còn có thể cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi hình ảnh hoặc hướng dẫn sự chú ý của họ. Trong bài này, chúng ta sẽ cùng nhau thực hiện một vài bài tập nhỏ để làm quen hơn với việc tạo và áp dụng animations.

Hãy bắt đầu nào!

1. Animation cơ bản: "Nhảy múa" (Bounce)

Một trong những animation phổ biến và dễ hình dung nhất là hiệu ứng nảy hoặc "nhảy múa". Chúng ta sẽ tạo một animation làm cho một phần tử di chuyển lên xuống nhẹ nhàng.

Đầu tiên, định nghĩa animation bằng quy tắc @keyframes:

@keyframes bounce {
  0% {
    transform: translateY(0); /* Bắt đầu ở vị trí ban đầu */
  }
  50% {
    transform: translateY(-15px); /* Lên cao 15px */
  }
  100% {
    transform: translateY(0); /* Quay về vị trí ban đầu */
  }
}

Giải thích @keyframes:
- Chúng ta đặt tên cho animation là bounce.
- 0%: Trạng thái ban đầu của animation. transform: translateY(0); giữ phần tử ở vị trí mặc định trên trục Y.
- 50%: Điểm giữa của animation. transform: translateY(-15px); di chuyển phần tử lên trên 15px (giá trị âm di chuyển lên).
- 100%: Trạng thái kết thúc của animation. Phần tử quay trở lại vị trí ban đầu.

Tiếp theo, áp dụng animation này cho một phần tử HTML. Giả sử chúng ta có một div đơn giản:

<div class="box bounce-box"></div>

Và CSS để style cho div và áp dụng animation:

.box {
  width: 50px;
  height: 50px;
  background-color: #3498db; /* Màu xanh dương */
  margin: 50px auto; /* Căn giữa cho dễ nhìn */
  border-radius: 8px;
}

.bounce-box {
  animation-name: bounce; /* Tên animation sẽ áp dụng */
  animation-duration: 1.5s; /* Thời gian hoàn thành một chu kỳ */
  animation-timing-function: ease-in-out; /* Tốc độ animation (chậm ở đầu và cuối, nhanh ở giữa) */
  animation-iteration-count: infinite; /* Lặp lại vô hạn */
}

Giải thích CSS:
- .box: Các thuộc tính style cơ bản cho phần tử.
- .bounce-box: Lớp áp dụng animation.
- animation-name: bounce;: Chỉ định animation có tên bounce sẽ được sử dụng.
- animation-duration: 1.5s;: Mỗi chu kỳ animation kéo dài 1.5 giây.
- animation-timing-function: ease-in-out;: Điều chỉnh tốc độ chuyển động, tạo cảm giác mượt mà hơn khi bắt đầu và kết thúc mỗi lần nảy.
- animation-iteration-count: infinite;: Làm cho animation lặp đi lặp lại mãi mãi.

Kết quả là hộp màu xanh sẽ nhẹ nhàng "nhảy" lên xuống không ngừng.

2. Animation thay đổi độ mờ (Fade)

Animation thay đổi độ mờ (opacity) thường được dùng để làm mờ dần hoặc hiện dần một phần tử, tạo hiệu ứng chuyển tiếp nhẹ nhàng.

Định nghĩa @keyframes cho hiệu ứng mờ dần rồi hiện lại:

@keyframes fade {
  0%, 100% {
    opacity: 1; /* Ban đầu và kết thúc: hiển thị hoàn toàn */
  }
  50% {
    opacity: 0.2; /* Ở giữa: mờ đi đáng kể */
  }
}

Giải thích @keyframes:
- Tên animation là fade.
- 0%, 100%: Kết hợp hai trạng thái 0% và 100% để chúng có cùng giá trị opacity: 1.
- 50%: Ở giữa animation, opacity giảm xuống còn 0.2 (rất mờ).

Áp dụng animation cho một phần tử khác:

<div class="box fade-box"></div>

Và CSS:

.fade-box {
  background-color: #e74c3c; /* Màu đỏ */
  animation-name: fade;
  animation-duration: 2s;
  animation-timing-function: linear; /* Tốc độ đều đặn */
  animation-iteration-count: infinite;
}

Giải thích CSS:
- .fade-box: Áp dụng animation.
- animation-name: fade;: Sử dụng animation fade.
- animation-duration: 2s;: Mỗi chu kỳ kéo dài 2 giây.
- animation-timing-function: linear;: Tốc độ thay đổi độ mờ là đều đặn từ đầu đến cuối.
- animation-iteration-count: infinite;: Lặp lại vô hạn.

Bây giờ bạn sẽ thấy hộp màu đỏ mờ đi rồi hiện lên liên tục.

3. Animation xoay (Rotate)

Animation xoay rất hữu ích để tạo hiệu ứng tải trang, hoặc chỉ đơn giản là làm cho một icon hoặc logo trông năng động hơn.

Định nghĩa @keyframes cho hiệu ứng xoay tròn 360 độ:

@keyframes rotate {
  from {
    transform: rotate(0deg); /* Bắt đầu ở góc 0 */
  }
  to {
    transform: rotate(360deg); /* Xoay đến góc 360 */
  }
}

Giải thích @keyframes:
- Tên animation là rotate.
- from: Tương đương với 0%.
- to: Tương đương với 100%.
- transform: rotate(...): Thuộc tính CSS dùng để xoay phần tử.

Áp dụng animation:

<div class="box rotate-box"></div>

Và CSS:

.rotate-box {
  background-color: #f1c40f; /* Màu vàng */
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Giải thích CSS:
- .rotate-box: Áp dụng animation.
- animation-name: rotate;: Sử dụng animation rotate.
- animation-duration: 3s;: Mỗi vòng quay mất 3 giây.
- animation-timing-function: linear;: Xoay đều đặn.
- animation-iteration-count: infinite;: Lặp lại vô hạn.

Hộp màu vàng sẽ quay tròn liên tục.

4. Animation kết hợp hiệu ứng và delay

Bạn có thể kết hợp nhiều thuộc tính khác nhau trong cùng một @keyframes và sử dụng các thuộc tính animation-* khác để điều chỉnh hành vi của animation, ví dụ như thêm độ trễ (animation-delay).

Hãy tạo một animation vừa di chuyển sang ngang vừa thay đổi màu nền, và thêm độ trễ trước khi bắt đầu.

Định nghĩa @keyframes kết hợp:

@keyframes move-and-color {
  0% {
    transform: translateX(0);
    background-color: #2ecc71; /* Màu xanh lá cây */
  }
  50% {
    transform: translateX(100px); /* Di chuyển sang phải 100px */
    background-color: #3498db; /* Chuyển sang màu xanh dương */
  }
  100% {
    transform: translateX(0);
    background-color: #2ecc71; /* Quay về màu xanh lá cây */
  }
}

Giải thích @keyframes:
- Tên animation là move-and-color.
- Ở các mốc thời gian 0%, 50%, 100%, chúng ta đồng thời thay đổi cả transform: translateX() và background-color.

Áp dụng animation với độ trễ:

<div class="box move-color-box"></div>

Và CSS:

.move-color-box {
  animation-name: move-and-color;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 1s; /* Chờ 1 giây trước khi bắt đầu animation lần đầu */
}

Giải thích CSS:
- .move-color-box: Áp dụng animation.
- animation-name: move-and-color;: Sử dụng animation đã định nghĩa.
- animation-duration: 4s;: Mỗi chu kỳ kéo dài 4 giây.
- animation-delay: 1s;: Quan trọng: Animation sẽ chờ 1 giây sau khi trang được tải hoặc phần tử được render trước khi bắt đầu chạy lần đầu tiên.

Quan sát hộp này, bạn sẽ thấy nó đứng yên trong 1 giây, sau đó mới bắt đầu di chuyển và đổi màu.

5. Kích hoạt Animation khi tương tác (ví dụ: Hover)

Bạn không nhất thiết phải cho animation chạy ngay lập tức khi trang tải. Thường thì chúng ta muốn animation chỉ chạy khi người dùng tương tác với phần tử, ví dụ như di chuột qua (:hover).

Hãy làm cho hộp xoay chỉ khi di chuột qua nó.

HTML giữ nguyên như ví dụ xoay:

<div class="box rotate-on-hover-box"></div>

CSS cho hiệu ứng này sẽ hơi khác một chút. Chúng ta sẽ định nghĩa @keyframes như cũ, nhưng việc áp dụng animation sẽ nằm trong pseudo-class :hover.

/* Định nghĩa keyframes như cũ */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-on-hover-box {
  background-color: #9b59b6; /* Màu tím */
  /* Ban đầu không áp dụng animation */
  /* Transition cho transform giúp animation mượt mà khi dừng */
  transition: transform 0.3s ease-out;
}

.rotate-on-hover-box:hover {
  /* Áp dụng animation khi hover */
  animation-name: rotate;
  animation-duration: 1s; /* Xoay nhanh hơn */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Giải thích CSS:
- @keyframes rotate: Định nghĩa giống bài tập 3.
- .rotate-on-hover-box: Style cơ bản. Không có thuộc tính animation-* ở đây. Thêm transition cho transform để khi con trỏ chuột rời đi, phần tử quay về trạng thái ban đầu một cách mượt mà hơn thay vì dừng đột ngột.
- .rotate-on-hover-box:hover: Đây là nơi chúng ta áp dụng animation. Khi người dùng di chuột vào phần tử, các thuộc tính animation-* này sẽ được kích hoạt, làm cho animation bắt đầu chạy. Khi di chuột ra, các thuộc tính này không còn hiệu lực, và animation sẽ dừng lại (thường là ở trạng thái cuối cùng của chu kỳ đang chạy), sau đó nhờ có transition mà nó quay về trạng thái ban đầu (rotate(0deg)) mượt mà.

Đây là một kỹ thuật rất phổ biến để thêm các hiệu ứng phản hồi khi người dùng tương tác với các phần tử như nút bấm, icon, hoặc hình ảnh.

Comments

There are no comments at the moment.