Sử dụng độ trễ chuyển tiếp thuộc tính để đặt độ trễ cho hiệu ứng chuyển tiếp với CSS. Bạn có thể thử chạy đoạn mã sau để đặt độ trễ chuyển tiếp là 1 giây:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
transition-delay: 2s;
}
div:hover {
width: 350px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Hover over the below box to change its width. It begins with a delay of 2 seconds.</p>
<div></div>
</body>
</html>