Thuộc tính transition-duration trong CSS
Bùi Tấn Lực - 834
- 11/10/2025
Chức năng của Thuộc tính transition-duration trong CSS
Thuộc tính transition-duration trong CSS dùng để quy định thời gian diễn ra cho một hiệu ứng transition thay đổi thường tính bằng giây (s) hoặc mili giây (ms).
Cú pháp của Thuộc tính transition-duration trong CSS
transition-duration: giatri;
giatri: Giá trị để quy định thời gian diễn ra cho một hiệu ứng transition (Ví dụ: 0.5s, 2s, 3s, 5s,.......)
Code Thuộc tính transition-duration trong CSS
transition-duration: 0.5s;
transition-duration: 2s;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-duration trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px}
div p{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:100%; color:#fff; transition-property:background-color;}
div p:hover{background-color:blue}
div span{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-property:width; }
div span:hover{width:100%}
</style>
</head>
<body>
<h1>Code Thuộc tính transition-duration trong CSS</h1>
<p>Dùng để quy định thời gian diễn ra cho một hiệu ứng transition thay đổi thường tính bằng giây (s) hoặc mili giây (ms), hãy rê chuột vào ô màu xanh để xem thời gian diễn ra 1 hiệu ứng:</p>
<!--transition-duration: 0.5s;-->
<div><p style="transition-duration: 0.5s;">transition-duration: 0.5s;</p></div>
<!--transition-duration: 2s;-->
<div><p style="transition-duration: 2s;">transition-duration: 2s;</p></div>
<!--transition-duration: 3s;-->
<div><span style="transition-duration: 3s;">transition-duration: 3s;</span></div>
<!--transition-duration: 6s;-->
<div><span style="transition-duration: 6s;">transition-duration: 6s;</span></div>
</body>
</html>
Ứng dụng transition-duration để tạo hiệu ứng CSS tự nhiên hơn
transition-duration quyết định khoảng thời gian một hiệu ứng chuyển đổi hoàn tất. Chọn đúng thời lượng giúp chuyển động trên giao diện đủ mượt để người dùng nhận thấy sự thay đổi nhưng không tạo cảm giác chậm chạp. Thay vì áp dụng một giá trị cố định cho mọi thành phần, nên điều chỉnh thời gian dựa trên đặc điểm và mục đích của từng hiệu ứng.
Điều chỉnh transition-duration theo từng loại hiệu ứng
Mỗi hiệu ứng có tốc độ phù hợp riêng. Các thay đổi nhỏ như màu nền, màu chữ hoặc độ trong suốt thường chỉ cần thời lượng ngắn. Với hiệu ứng di chuyển, phóng to hoặc thay đổi kích thước, thời gian có thể dài hơn để người dùng dễ theo dõi hướng chuyển động.
- Đổi màu: nên dùng thời lượng ngắn để phản hồi tương tác nhanh.
- Thay đổi opacity: có thể tăng thời gian một chút để hiệu ứng xuất hiện hoặc biến mất mềm mại.
- Di chuyển: cần cân đối thời lượng với khoảng cách, vì quãng đường càng lớn thì chuyển động quá nhanh càng dễ gây cảm giác giật.
- Transform: nên chọn thời gian vừa đủ để thao tác như hover, scale hoặc xoay không làm giao diện phản hồi chậm.
Ví dụ, một nút chỉ thay đổi màu khi rê chuột có thể dùng thời lượng ngắn:
.button {
transition-property: background-color;
transition-duration: 0.2s;
}
Trong khi đó, một phần tử cần di chuyển rõ ràng có thể sử dụng thời lượng dài hơn:
.box {
transition-property: transform;
transition-duration: 0.5s;
}
Kết hợp transition-duration với transition-property và transition-timing-function
transition-duration chỉ xác định hiệu ứng diễn ra trong bao lâu, không quyết định cách chuyển động thay đổi tốc độ. Để tạo cảm giác tự nhiên, nên kết hợp nó với transition-property và transition-timing-function.
.card {
transition-property: transform, box-shadow;
transition-duration: 0.3s;
transition-timing-function: ease;
}
Cách thiết lập này giúp xác định rõ thuộc tính nào được chuyển đổi, thời gian hoàn tất và nhịp độ thay đổi trong suốt quá trình. Nhờ đó, hiệu ứng dễ kiểm soát hơn thay vì phụ thuộc vào một thiết lập transition chung cho toàn bộ phần tử.
Tránh đặt transition-duration quá nhanh hoặc quá chậm
Thời lượng quá ngắn có thể khiến thay đổi xảy ra gần như tức thì, làm mất cảm giác chuyển tiếp. Ngược lại, thời lượng quá dài khiến thao tác như hover, mở menu hoặc phản hồi nút bấm trở nên ì và thiếu tự nhiên.
Khi lựa chọn giá trị, nên xem xét cả khoảng cách chuyển động, kích thước thành phần và tần suất tương tác. Thành phần được thao tác liên tục thường cần phản hồi nhanh hơn thành phần chỉ xuất hiện trong các chuyển cảnh lớn.
Quan trọng nhất là thử trực tiếp trên giao diện thay vì áp dụng một con số cho mọi trường hợp. Một thời lượng phù hợp phải giúp người dùng nhận biết trạng thái thay đổi mà không làm gián đoạn thao tác.
Tối ưu transition-duration trên giao diện responsive
Trên các kích thước màn hình khác nhau, cùng một hiệu ứng có thể tạo cảm nhận khác nhau. Một chuyển động ngắn trên màn hình lớn có thể trông hợp lý nhưng lại gây cảm giác quá nhanh trên một thành phần chiếm ít không gian ở màn hình nhỏ.
Với giao diện responsive, nên ưu tiên sự nhất quán và khả năng phản hồi. Những hiệu ứng phục vụ thao tác trực tiếp như nút, liên kết hoặc điều khiển menu không nên kéo dài chỉ để tạo chuyển động đẹp mắt. Với các hiệu ứng phụ trợ, có thể tinh chỉnh thời lượng khi bố cục hoặc cách tương tác thay đổi.
Ngoài ra, nên cân nhắc tùy chọn giảm chuyển động của hệ điều hành để hạn chế hiệu ứng không cần thiết đối với người dùng có nhu cầu về chuyển động tối thiểu. Điều này giúp giao diện không chỉ mượt mà mà còn thân thiện hơn trong nhiều hoàn cảnh sử dụng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transition-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 *
