Thuộc tính animation trong CSS
Trần Thị Vân - 1147
- 19/07/2025
Chức năng của Thuộc tính animation trong CSS
Thuộc tính animation trong CSS dùng để tạo hiệu ứng chuyển động vị trí, trạng thái css cho các phần tử HTML bằng cách dùng animation để quản lý thời lượng, tốc độ, độ trễ và hướng lặp và dùng @keyframes để định nghĩa các trạng thái css.
Cú pháp của Thuộc tính animation trong CSS
animation: animation-name animation-duration animation-iteration-count;
animation-name: Dùng để đặt tên cho animation, tên này trùng khớp với tên đặt trong quy tắc @keyframes, tên trong @keyframes dùng để tạo ra một hoặc nhiều hành động cụ thể.
Ví dụ về tên @keyframes:
@keyframes chayngang{
from {left: 0px;}
to {left: 200px;}
}
@keyframes chayngang2{
0% {top:0px;left:0px}
50% {top:0px;left:200px}
75% {top:200px;left:200px}
100% {top:200px;left:0px}
}
animation-duration: Dùng để quy định thời gian diễn ra một animation, thường là số giây, ví dụ như animation-duration: 5s (Ví dụ: 1s, 2s, 10s,......)
animation-iteration-count: Dùng để quy định số lần lặp lại một animation, là một con số hoặc infinite để lặp lại vô hạn (Ví dụ: 5, 2, infinite,.....)
Ví dụ cụ thể:
animation: chayngang 3s infinite;
Ví dụ Thuộc tính animation trong CSS
Css animation from to
Ở ví dụ này mình đặt tên animation là chạy ngang, thời gian chạy mỗi lần là 1 giây, số lần chạy là không giới hạn số lần chạy, hàm chạy ngang sẽ chạy từ left 0px đến left 200px:
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css animation from to</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: chayngang 3s infinite;
}
@keyframes chayngang{
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1>Chạy thử Css animation from to</h1>
<p>Thuộc tính animation trong CSS dùng để tạo hiệu ứng chuyển động vị trí, trạng thái css cho các phần tử HTML bằng cách dùng animation để quản lý thời lượng, tốc độ, độ trễ và hướng lặp và dùng @keyframes để định nghĩa các trạng thái css:</p>
<p>Ở ví dụ này mình đặt tên animation là chạy ngang, thời gian chạy mỗi lần là 1 giây, số lần chạy là không giới hạn số lần chạy, hàm chạy ngang sẽ chạy từ left 0px đến left 200px:</p>
<span>animation</span>
</body>
</html>
Css animation phần trăm (%)
Ở ví dụ này mình cho thời gian chạy là 2 giây và chạy liên tục, lúc 0% là ở vị trí xuất phát, lúc 50% sẽ cách top 0px, cách left 200px, lúc 75% cách top 200px cách left 200px, lúc 100% các top 200px cách left 0px, chạy theo hình vuông:
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css animation phần trăm (%)</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: chayngang 6s infinite;
}
@keyframes chayngang{
0% {top:0px;left:0px}
50% {top:0px;left:200px}
75% {top:200px;left:200px}
100% {top:200px;left:0px}
}
</style>
</head>
<body>
<h1>Chạy thử Css animation phần trăm (%)</h1>
<p>Thuộc tính animation trong CSS dùng để tạo hiệu ứng chuyển động vị trí, trạng thái css cho các phần tử HTML bằng cách dùng animation để quản lý thời lượng, tốc độ, độ trễ và hướng lặp và dùng @keyframes để định nghĩa các trạng thái css.</p>
<p>Ở ví dụ này mình cho thời gian chạy là 2 giây và chạy liên tục, lúc 0% là ở vị trí xuất phát, lúc 50% sẽ cách top 0px, cách left 200px, lúc 75% cách top 200px cách left 200px, lúc 100% các top 200px cách left 0px, chạy theo hình vuông:</p>
<span>animation</span>
</body>
</html>
Các thuộc tính thuộc animation
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| animation-name | tên animation | animation-name: myAnimation; | Xác định tên cho một animation. |
| animation-duration | thời gian | animation-duration: 5s; | Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s. |
| animation-timing-function | linear | animation-timing-function: linear; | Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc. |
| ease | animation-timing-function: ease; | Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định. | |
| ease-in | animation-timing-function: ease-in; | Chuyển động ban đầu sẽ chậm, sau đó nhanh dần. | |
| ease-out | animation-timing-function: ease-out; | Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần. | |
| ease-in-out | animation-timing-function: ease-in-out; | Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần. | |
| cubic-bezier(n,n,n,n) | animation-timing-function: cubic-bezier(1,1,1,0); | Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1. | |
| animation-delay | thời gian | animation-delay: 3s; | Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0 |
| animation-iteration-count | số tự nhiên | animation-iteration-count: 4; | Xác định số lần thực hiện chuyển động. |
| infinite | animation-iteration-count: infinite; | Chuyển động sẽ thực hiện không giới hạn số lần. | |
| animation-direction | normal | animation-direction: normal; | Chuyển động bình thường, đây là dạng mặc định. |
| alternate | animation-direction: alternate; | Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo. | |
| animation-play-state | paused | animation-play-state: paused; | Xác định chuyển động dừng lại. |
| running | animation-play-state: running; | Xác định chuyển động chạy. | |
| animation | [name] [duration] [timing] [delay] [interaction-count] [direction] | animation: myAnimation 5s linear 3s infinite alternate; | Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state. |
Những lưu ý khi sử dụng animation trong CSS
Animation trong CSS giúp tạo chuyển động trực quan mà không cần phụ thuộc vào JavaScript. Tuy nhiên, hiệu quả của hiệu ứng không chỉ nằm ở việc tạo được chuyển động mà còn phụ thuộc vào cách chọn thuộc tính, thời gian và tần suất lặp. Một animation được thiết kế hợp lý sẽ hỗ trợ giao diện, còn hiệu ứng quá mạnh hoặc xuất hiện liên tục có thể làm người dùng mất tập trung.
Chọn thuộc tính CSS phù hợp để tạo chuyển động mượt
Khi tạo animation, nên ưu tiên những thuộc tính có thể thay đổi mà không khiến trình duyệt phải tính toán lại quá nhiều thành phần của trang. Các thuộc tính như transform và opacity thường phù hợp để tạo chuyển động, thay đổi vị trí, phóng to hoặc làm mờ đối tượng.
Thay vì thay đổi trực tiếp nhiều thuộc tính về kích thước hoặc vị trí bố cục, có thể kết hợp transform với opacity để tạo hiệu ứng nhẹ và ổn định hơn. Cách này đặc biệt hữu ích với các thành phần xuất hiện khi người dùng cuộn trang, mở menu hoặc tương tác với nút bấm.
Kiểm soát thời gian và số lần lặp của animation
Thời gian chạy cần phù hợp với mục đích của hiệu ứng. Một chuyển động quá nhanh có thể khiến người dùng khó nhận biết thay đổi, trong khi animation quá chậm lại tạo cảm giác giao diện phản hồi chậm. Với những hiệu ứng phục vụ thao tác, nên ưu tiên khoảng thời gian vừa đủ để người dùng nhận thấy sự thay đổi mà không phải chờ đợi.
Số lần lặp cũng cần được cân nhắc. Các hiệu ứng trang trí có thể lặp lại ở mức vừa phải, nhưng animation chạy vô hạn chỉ nên dùng khi chuyển động thực sự có ý nghĩa, chẳng hạn như tín hiệu đang tải hoặc một thành phần cần thu hút sự chú ý trong thời gian dài.
Hạn chế animation gây ảnh hưởng trải nghiệm người dùng
Không nên sử dụng quá nhiều hiệu ứng chuyển động trên cùng một khu vực. Khi nhiều thành phần đồng thời phóng to, xoay, di chuyển hoặc nhấp nháy, giao diện dễ trở nên rối và làm người dùng khó tập trung vào nội dung chính.
Đối với các hiệu ứng không mang tính bắt buộc, có thể thiết kế để người dùng giảm chuyển động khi hệ điều hành hoặc trình duyệt yêu cầu. Đây là cách giúp giao diện thân thiện hơn với những người nhạy cảm với chuyển động.
Quan trọng nhất, animation nên phục vụ mục đích giao diện thay vì chỉ được thêm vào để tạo cảm giác bắt mắt. Một hiệu ứng tốt cần giúp người dùng hiểu trạng thái, nhận biết thay đổi hoặc định hướng thao tác mà không cản trở việc đọc và sử dụng trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
