Thuộc tính animation-delay trong CSS
Bùi Tấn Lực - 876
- 08/10/2025
Chức năng của Thuộc tính animation-delay trong CSS
Thuộc tính animation-delay trong CSS dùng để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation, giá trị nhập vào là con số, hoặc initial là không chờ (chạy ngay lập tức), inherit là thừa hưởng giá trị animation-delay từ phần tử cha.
Cú pháp của Thuộc tính animation-delay trong CSS
animation-delay: giatri;
giatri: Giá trị để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation (Ví dụ: 2s, 3s,......)
Code Thuộc tính animation-delay trong CSS
animation-delay: 6s;
animation-delay: 2s;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-delay trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chohaigiay {
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: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-delay: 2s; /*Chờ 2 giây*/
}
#chobagiay {
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: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-delay: 3s; /*Chờ 3 giây*/
}
#khongcho {
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: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-delay: initial; /*Không chờ, chạy ngay lập tức*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
</style>
</head>
<body>
<h1>Code Thuộc tính animation-delay trong CSS</h1>
<p>Dùng để quy định thời gian chờ trước khi thực hiện một sự kiện về một animation, giá trị nhập vào là con số, hoặc initial là không chờ (chạy ngay lập tức), inherit là thừa hưởng giá trị animation-delay từ phần tử cha:</p>
<p><span id="chohaigiay">animation-delay: 2s; (Chờ 2 giây)</span></p>
<p><span id="chobagiay">animation-delay: 3s; (Chờ 3 giây)</span></p>
<p><span id="khongcho">animation-delay: initial; (Không chờ)</span></p>
</body>
</html>
Cách sử dụng animation-delay để tạo hiệu ứng xuất hiện tuần tự
animation-delay có thể tạo ra hiệu ứng xuất hiện lần lượt cho nhiều phần tử thay vì để tất cả chuyển động cùng lúc. Chỉ cần thay đổi thời gian chờ của từng phần tử, bạn có thể tạo cảm giác nội dung được dẫn dắt theo từng bước, phù hợp với danh sách, thẻ nội dung hoặc các thành phần trong giao diện.
Tạo độ trễ khác nhau cho từng phần tử
Mỗi phần tử có thể nhận một giá trị animation-delay riêng. Phần tử đầu tiên bắt đầu sớm hơn, các phần tử phía sau được tăng thời gian chờ để tạo hiệu ứng nối tiếp.
.item:nth-child(1) {
animation-delay: 0s;
}
.item:nth-child(2) {
animation-delay: 0.2s;
}
.item:nth-child(3) {
animation-delay: 0.4s;
}
Cách này đặc biệt hữu ích khi muốn danh sách hoặc các khối nội dung lần lượt xuất hiện mà không cần tạo nhiều animation khác nhau. Nên giữ khoảng trễ vừa phải để hiệu ứng có cảm giác tự nhiên và không làm người dùng phải chờ quá lâu.
Kết hợp animation-delay với animation-fill-mode
Khi một animation có thời gian chờ, phần tử có thể giữ trạng thái ban đầu trước khi chuyển động. animation-fill-mode giúp kiểm soát trạng thái của phần tử trong khoảng thời gian trước hoặc sau animation, nhờ đó hiệu ứng xuất hiện không bị giật hoặc lộ trạng thái không mong muốn.
.item {
animation: showItem 0.6s ease forwards;
animation-delay: 0.3s;
animation-fill-mode: both;
}
Với cách kết hợp này, phần tử có thể giữ trạng thái phù hợp trong lúc chờ và tiếp tục giữ trạng thái cuối sau khi animation hoàn tất. Đây là lựa chọn đáng cân nhắc khi xây dựng hiệu ứng fade-in, trượt vào hoặc hiển thị tuần tự.
Sử dụng animation-delay âm để bắt đầu animation giữa chừng
animation-delay không nhất thiết phải là một khoảng thời gian dương. Khi sử dụng giá trị âm, animation có thể bắt đầu ngay tại thời điểm trang được hiển thị nhưng được xem như đã chạy qua một phần thời gian.
.item {
animation: moveIn 2s ease -0.8s both;
}
Trong ví dụ này, animation không phải chờ 0,8 giây mới chạy. Thay vào đó, nó bắt đầu ở trạng thái tương ứng với khoảng 0,8 giây đã trôi qua. Cách làm này phù hợp khi muốn nhiều phần tử có cùng animation nhưng xuất hiện ở các trạng thái khác nhau ngay từ đầu.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-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 *
