Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến hoạt hình

Các thuộc tính CSS liên quan đến hoạt hình

Bài viết này giải thích các thuộc tính CSS liên quan đến hoạt hình.

Bạn có thể tìm hiểu về cách sử dụng và cú pháp của các thuộc tính @keyframes, animation và transition.

YouTube Video

HTML để Xem trước

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Hoạt hình và Chuyển tiếp

Quy tắc @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes được sử dụng trong hoạt hình CSS để xác định các thay đổi về kiểu dáng trong quá trình hoạt hình. Trong @keyframes, các thay đổi về kiểu dáng từ đầu đến cuối hoạt hình được xác định bằng phần trăm thời gian hoặc từ khóa (from và to).

  • Đây là một ví dụ về một hoạt hình trong đó một phần tử trượt từ trái sang phải và quay trở lại vị trí ban đầu.
  • Trong ví dụ này, slide được viết sau @keyframes, định nghĩa một hoạt hình có tên là slide.
  • 0% là sự bắt đầu của hoạt hình, với translateX(0) định vị phần tử tại vị trí ban đầu của nó.
  • 50% là vị trí giữa trong hoạt hình, nơi phần tử di chuyển 200px sang phải bằng cách sử dụng translateX(200px).
  • 100% là sự kết thúc của hoạt hình, với phần tử quay trở lại vị trí ban đầu của nó.
  • Trong lớp box-animation-slide, thuộc tính animation được sử dụng để áp dụng hoạt hình slide cách nhau 3 giây.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Bạn có thể kiểm soát chi tiết các kiểu dáng trong quá trình hoạt hình. Bằng cách chỉ định phần trăm, bạn có thể áp dụng các kiểu dáng khác nhau tại các thời điểm tùy ý.
    • Trong ví dụ này, màu sắc thay đổi dần từ đỏ sang xanh dương, sang xanh lá, sang vàng và trở lại đỏ.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • Trong ví dụ này, from tương đương với 0% và to tương đương với 100%. Điều này cho phép bạn định nghĩa các hoạt hình đơn giản.

Cú pháp Cơ bản 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Tên của hoạt hình. Điều này được chỉ định bằng thuộc tính animation hoặc thuộc tính animation-name.
  • Phần trăm hoặc Từ khóa: Sử dụng phần trăm từ 0% đến 100%, hoặc các từ khóa from (tương đương với 0%) và to (tương đương với 100%).

Thuộc tính animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

Thuộc tính animation được sử dụng để áp dụng các hiệu ứng hoạt hình cho một phần tử. Các hiệu ứng hoạt hình xác định cách mà một tập hợp các kiểu CSS thay đổi theo thời gian. Với thuộc tính animation, bạn có thể kiểm soát thời gian, hành vi, độ trễ, số lần lặp lại và nhiều yếu tố khác của một hiệu ứng hoạt hình.

  • Lớp box-animation-ease-in-out chỉ định slide là animation-name, và sử dụng hiệu ứng hoạt hình slide được định nghĩa trong @keyframes.
    • 3s là animation-duration, có nghĩa là mỗi chu kỳ của hiệu ứng hoạt hình hoàn thành trong 3 giây.
    • ease-in-out là animation-timing-function, làm cho hiệu ứng khởi động chậm, sau đó tăng tốc, và cuối cùng chậm lại khi kết thúc.
    • infinite là animation-iteration-count, nghĩa là hiệu ứng hoạt hình sẽ lặp lại vô tận.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • Lớp box-animation-alternate chỉ định color-change là animation-name, và sử dụng hiệu ứng hoạt hình color-change được định nghĩa trong @keyframes.
    • 1s sau ease-in-out là animation-delay, chỉ định độ trễ trước khi hiệu ứng hoạt hình bắt đầu. Hiệu ứng hoạt hình sẽ bắt đầu sau 1 giây.
    • 3 sau 1s là animation-iteration-count, nghĩa là hiệu ứng hoạt hình sẽ lặp lại 3 lần.
    • alternate là animation-direction, chỉ định hướng phát lại của hiệu ứng hoạt hình. alternate chỉ định rằng hiệu ứng hoạt hình sẽ phát xen kẽ.

Cấu trúc của thuộc tính animation

Thuộc tính animation là một thuộc tính viết tắt kết hợp nhiều thuộc tính con khác nhau thành một. Dưới đây là các thuộc tính con chính:.

  • animation-name: Chỉ định tên của hiệu ứng hoạt hình sẽ được áp dụng. Nó phải khớp với tên của hiệu ứng hoạt hình được định nghĩa trong @keyframes.
  • animation-duration: Chỉ định thời gian cần thiết để hoàn thành một chu kỳ hiệu ứng hoạt hình. Đơn vị thời gian là giây (s) hoặc mili giây (ms).
  • animation-timing-function: Chỉ định đường cong tốc độ của hiệu ứng hoạt hình. Những giá trị như ease, linear, ease-in, ease-out, ease-in-out, v.v. được sử dụng.
    • Chỉ định ease sẽ làm cho hiệu ứng hoạt hình bắt đầu chậm, sau đó tăng tốc, và cuối cùng lại chậm lại khi kết thúc.
    • Chỉ định linear sẽ làm cho hiệu ứng hoạt hình diễn ra với tốc độ không đổi từ đầu đến cuối.
    • Chỉ định ease-in sẽ bắt đầu hoạt hình một cách chậm rãi và kết thúc nhanh chóng.
    • Chỉ định ease-out sẽ bắt đầu hoạt hình nhanh và kết thúc chậm rãi.
    • Chỉ định ease-in-out sẽ bắt đầu chậm, diễn tiến nhanh và kết thúc chậm rãi.
  • Thuộc tính animation-delay xác định độ trễ trước khi hoạt hình bắt đầu. Đơn vị thời gian là giây hoặc mili giây.
  • Thuộc tính animation-iteration-count xác định số lần hoạt hình sẽ lặp lại. Chỉ định infinite sẽ lặp đi lặp lại hoạt hình mãi mãi.
  • Thuộc tính animation-direction xác định hướng phát lại của hoạt hình. Các tùy chọn bao gồm normal (hướng tiến), reverse (hướng ngược), alternate (chạy xen kẽ), và alternate-reverse (chạy xen kẽ bắt đầu từ ngược).
  • Thuộc tính animation-fill-mode xác định trạng thái của hoạt hình trước khi nó bắt đầu và sau khi nó kết thúc. Bạn có thể chỉ định bất kỳ giá trị nào trong số none, forwards, backwards, hoặc both.
  • Thuộc tính animation-play-state xác định hoạt hình đang chạy hay đã tạm dừng. Bạn có thể chỉ định running hoặc paused.

Tóm tắt

Thuộc tính animation là một công cụ mạnh mẽ để thay đổi phong cách của các phần tử một cách động. Bằng cách sử dụng @keyframes, bạn có thể định nghĩa cách các phong cách thay đổi theo thời gian và điều khiển hành vi chi tiết của hoạt hình với từng thuộc tính con của animation.

Thuộc tính transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Thuộc tính transition được sử dụng để áp dụng hiệu ứng hoạt hình cho các thay đổi phong cách CSS. Nó cho phép các thay đổi diễn ra mượt mà trong suốt các thay đổi trạng thái như hover, focus, active, hoặc khi các phong cách được thay đổi động bởi JavaScript.

Hãy xem một ví dụ về lớp transition-box nơi màu nền thay đổi một cách mượt mà khi di chuột qua nút. - Trong lớp transition-box, thuộc tính transition áp dụng một hiệu ứng chuyển đổi trong 2 giây cho sự thay đổi màu nền. Sự thay đổi được chỉ định là ease, làm cho nó trở nên mượt mà. - Lớp giả hover thay đổi màu nền từ lightgray thành steelblue khi chuột di qua nút. Sự thay đổi này xảy ra một cách mượt mà trong 2 giây được chỉ định trong lớp transition-box.

Có thể áp dụng transition cho nhiều thuộc tính đồng thời. - Trong ví dụ lớp transition-2-properties, màu nền thay đổi trong 5 giây và độ rộng thay đổi trong 0,5 giây.

Cú pháp Cơ bản 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property chỉ rõ những thuộc tính CSS nào sẽ được áp dụng hoạt ảnh. Chỉ định all sẽ áp dụng hoạt ảnh cho tất cả các thuộc tính.
  • duration chỉ rõ thời gian mà hoạt ảnh sẽ hoàn thành. Chỉ định bằng giây (s) hoặc mili giây (ms).
  • timing-function chỉ rõ sự thay đổi về tốc độ của hoạt ảnh. Bạn có thể sử dụng các tùy chọn như ease, linear, ease-in, ease-out, ease-in-out, v.v.
  • delay chỉ rõ thời gian trì hoãn trước khi hoạt ảnh bắt đầu. Chỉ định bằng giây hoặc mili giây.

Các thuộc tính chi tiết của transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition cũng có thể được sử dụng dưới dạng các thuộc tính riêng lẻ như sau.

  • transition-property: Chỉ rõ thuộc tính mà hoạt ảnh được áp dụng.
  • transition-duration: Chỉ rõ thời gian hoàn thành hoạt ảnh.
  • transition-timing-function: Chỉ rõ tốc độ tiến triển của hoạt ảnh. Có thể sử dụng các tùy chọn như ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Chỉ rõ thời gian trì hoãn trước khi hoạt ảnh bắt đầu.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến hiệu ứng bộ lọc