Sử dụng chức năng chuyển đổi thời gian thuộc tính để thiết lập đường cong tốc độ của hiệu ứng chuyển tiếp. Các giá trị bạn có thể đặt là dễ dàng, dễ vào, dễ ra, tuyến tính, v.v.
Bạn có thể thử chạy đoạn mã sau để đặt đường cong tốc độ của hiệu ứng chuyển tiếp bằng CSS
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 {
transition-timing-function: linear;
}
#effect2 {
transition-timing-function: ease-in;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>Transition Effect</h1>
<p>Hover over the div elements and see the transition effect and the speed:</p>
<div id = "effect1">linear effect</div><br>
<div id = "effect2">ease-in effect</div><br>
</body>
</html>