Thuộc tính animation-duration trong CSS
Bùi Tấn Lực - 859
- 08/10/2025
Chức năng của Thuộc tính animation-duration trong CSS
Thuộc tính animation-duration trong CSS 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.
Cú pháp của Thuộc tính animation-duration trong CSS
animation-duration: giatri;
giatri: Giá trị để quy định thời gian diễn ra một animation (Ví dụ: 1s, 3s, 5s,.....)
Code Thuộc tính animation-duration trong CSS
animation-duration: 5s;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-duration trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#namgiay {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 5s; /* Thời gian diễn ra animation là 5s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
#muoigiay {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 10s; /* Thời gian diễn ra animation là 10s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
</style>
</head>
<body>
<h1>Code Thuộc tính animation-duration trong CSS</h1>
<span>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:</span>
<p><span id="namgiay">animation-duration: 5s;</span></p>
<p><span id="muoigiay">animation-duration: 10s;</span></p>
</body>
</html>
Cách sử dụng animation-duration hiệu quả trong CSS
Chọn thời gian animation phù hợp với từng hiệu ứng
Thời gian của animation nên được lựa chọn dựa trên loại chuyển động và mục đích của hiệu ứng. Các chuyển động nhỏ như đổi màu, làm mờ hoặc phóng to nhẹ thường phù hợp với khoảng thời gian ngắn để giao diện phản hồi nhanh. Ngược lại, hiệu ứng di chuyển một đối tượng trên quãng đường dài có thể cần thời gian lâu hơn để chuyển động không bị gấp.
Không nên mặc định rằng thời gian càng dài thì hiệu ứng càng đẹp. Animation quá chậm có thể khiến người dùng cảm thấy giao diện phản hồi kém, trong khi thời gian quá ngắn dễ tạo cảm giác giật hoặc khó quan sát. Vì vậy, hãy thử nghiệm trên chính giao diện thực tế và điều chỉnh cho đến khi chuyển động vừa đủ rõ ràng nhưng không làm gián đoạn thao tác.
Kết hợp animation-duration với các thuộc tính animation khác
animation-duration chỉ quyết định khoảng thời gian để một chu kỳ animation hoàn thành. Để tạo chuyển động tự nhiên hơn, thuộc tính này thường được kết hợp với các thiết lập khác như kiểu chuyển động, số lần lặp, hướng chạy hoặc thời điểm bắt đầu.
Chẳng hạn, cùng một thời gian nhưng hiệu ứng sẽ cho cảm nhận khác nhau khi sử dụng tốc độ chuyển động tuyến tính hoặc chuyển động tăng giảm theo từng giai đoạn. Việc phối hợp các thuộc tính animation giúp kiểm soát toàn bộ hành vi của hiệu ứng thay vì chỉ kéo dài hoặc rút ngắn thời gian thực hiện.
So sánh animation-duration ngắn và dài
| Thời gian | Đặc điểm | Phù hợp |
|---|---|---|
| Ngắn | Phản hồi nhanh, chuyển động dứt khoát nhưng dễ tạo cảm giác gấp nếu đặt quá thấp. | Hover, đổi trạng thái, fade, scale nhẹ và các tương tác nhỏ. |
| Dài | Chuyển động chậm, dễ quan sát nhưng có thể làm giao diện thiếu linh hoạt nếu sử dụng quá mức. | Chuyển động trên quãng đường lớn hoặc hiệu ứng mang tính trình diễn. |
Khi xây dựng giao diện, nên ưu tiên cảm giác chuyển động thay vì cố định một khoảng thời gian cho mọi trường hợp. Một hiệu ứng tốt là hiệu ứng đủ nhanh để không cản trở thao tác nhưng vẫn đủ lâu để người dùng nhận biết sự thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-duration 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 *
