Thuộc tính transition-delay trong CSS
Bùi Tấn Lực - 840
- 11/10/2025
Chức năng của Thuộc tính transition-delay trong CSS
Thuộc tính transition-delay trong CSS dùng để quy định thời gian chờ trước khi thực hiện hiệu ứng transition trên phần tử HTML.
Cú pháp của Thuộc tính transition-delay trong CSS
transition-delay: giatri;
giatri: Giá trị để quy định thời gian chờ trước khi thực hiện hiệu ứng transition trên phần tử HTML (Ví dụ: 0.5s, 1s, 2s, 3s,....)
Code Thuộc tính transition-delay trong CSS
transition-delay: 0.5s;
transition-delay: 1s;
transition-delay: 2s;
transition-delay: 3s;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-delay 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}
span{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-property:width; transition-duration: 3s;}
span:hover{width:100%}
</style>
</head>
<body>
<h1>Code Thuộc tính transition-delay trong CSS</h1>
<p>Dùng để quy định thời gian chờ trước khi thực hiện hiệu ứng transition trên phần tử HTML, bạn hãy rê chuột vào ô màu xanh để thực hiện thay đổi chiều rộng:</p>
<!--transition-delay: 0.5s;-->
<div><span style="transition-delay: 0.5s;">transition-delay: 0.5s;</span></div>
<!--transition-delay: 1s;-->
<div><span style="transition-delay: 1s;">transition-delay: 1s;</span></div>
<!--transition-delay: 2s;-->
<div><span style="transition-delay: 2s;">transition-delay: 2s;</span></div>
<!--transition-delay: 3s;-->
<div><span style="transition-delay: 3s;">transition-delay: 3s;</span></div>
</body>
</html>
Ứng dụng transition-delay trong các hiệu ứng CSS thực tế
transition-delay phát huy hiệu quả khi thời điểm bắt đầu chuyển đổi cần được kiểm soát thay vì diễn ra ngay lập tức. Thuộc tính này đặc biệt hữu ích trong các hiệu ứng tương tác, giúp chuyển động có trình tự và tạo cảm giác tự nhiên hơn.
Tạo hiệu ứng xuất hiện lần lượt cho nhiều phần tử
Khi nhiều phần tử cần xuất hiện theo thứ tự, có thể gán cho mỗi phần tử một khoảng trễ khác nhau. Cách này tạo hiệu ứng nối tiếp mà không cần viết riêng một animation cho từng phần tử.
.item:nth-child(1) {
transition-delay: 0s;
}
.item:nth-child(2) {
transition-delay: 0.1s;
}
.item:nth-child(3) {
transition-delay: 0.2s;
}
Chẳng hạn, khi danh sách chuyển sang trạng thái mới, phần tử thứ hai sẽ bắt đầu sau phần tử thứ nhất, còn phần tử thứ ba tiếp tục chậm hơn. Khoảng trễ nhỏ thường đủ để tạo cảm giác chuyển động liền mạch mà không khiến giao diện phản hồi chậm.
Kết hợp transition-delay với hover để tạo hiệu ứng mượt hơn
Kết hợp transition-delay với :hover giúp kiểm soát thời điểm hiệu ứng bắt đầu khi người dùng đưa con trỏ lên phần tử. Đây là cách phù hợp cho nút bấm, menu, thẻ nội dung hoặc các thành phần cần hạn chế hiệu ứng xảy ra quá nhanh.
.button {
opacity: 0.7;
transition: opacity 0.3s ease;
transition-delay: 0.1s;
}
.button:hover {
opacity: 1;
}
Khoảng trễ ngắn giúp tránh việc hiệu ứng kích hoạt liên tục khi con trỏ chỉ lướt nhanh qua khu vực tương tác. Tuy nhiên, thời gian chờ nên vừa phải để người dùng vẫn cảm nhận được phản hồi ngay sau thao tác.
Điều khiển thời điểm chuyển đổi giữa nhiều trạng thái
Trong giao diện có nhiều thành phần thay đổi cùng lúc, transition-delay có thể được dùng để tạo thứ tự chuyển đổi. Ví dụ, một phần tử có thể thay đổi kích thước trước, sau đó màu nền hoặc nội dung liên quan mới bắt đầu chuyển trạng thái.
.card {
transform: scale(1);
opacity: 0.8;
transition:
transform 0.3s ease,
opacity 0.3s ease 0.15s;
}
.card:hover {
transform: scale(1.05);
opacity: 1;
}
Cách sắp xếp này giúp các thay đổi không xảy ra đồng thời một cách cứng nhắc. Khi sử dụng, nên xác định rõ hiệu ứng nào cần phản hồi trước và hiệu ứng nào có thể xuất hiện sau để tránh làm giao diện trở nên rối mắt.
Những trường hợp không nên lạm dụng transition-delay
Không phải hiệu ứng nào cũng cần độ trễ. Nếu đặt thời gian chờ quá dài, giao diện có thể tạo cảm giác phản hồi chậm dù CSS vẫn hoạt động chính xác. Điều này đặc biệt dễ nhận thấy ở các thành phần mà người dùng thường xuyên tương tác.
Với các thao tác cần phản hồi tức thời, nên dùng transition-delay rất ngắn hoặc bỏ qua thuộc tính này. Độ trễ chỉ nên được sử dụng khi nó thực sự giúp phân biệt các trạng thái, tạo trình tự chuyển động hoặc giảm cảm giác hiệu ứng xảy ra quá đột ngột.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transition-delay 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 *
