Thuộc tính transition-timing-function trong CSS
Bùi Tấn Lực - 793
- 11/10/2025
Chức năng của Thuộc tính transition-timing-function trong CSS
Thuộc tính transition-timing-function trong CSS dùng để quy định cách chạy nhanh chạy chậm của hiệu ứng transition ở các giai đoạn: đầu, giữa, cuối.
Cú pháp của Thuộc tính transition-timing-function trong CSS
transition-timing-function: giatri;
giatri: Giá trị để quy định cách chạy nhanh chạy chậm của hiệu ứng transition ở các giai đoạn: đầu, giữa, cuối (Ví dụ: ease, linear, ease-in, ease-out, ease-in-out)
Các giá trị của Thuộc tính transition-timing-function trong CSS
ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).
linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.
ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.
ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.
Code Thuộc tính transition-timing-function trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-timing-function 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%}
div p{margin:0px; padding:0px}
</style>
</head>
<body>
<h1>Code Thuộc tính transition-timing-function trong CSS</h1>
<p>Dùng để quy định cách chạy nhanh chạy chậm của hiệu ứng transition ở các giai đoạn: đầu, giữa, cuối:</p>
<!--transition-timing-function: ease;-->
<p>ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).</p>
<div><span style="transition-timing-function: ease;">transition-timing-function: ease;</span></div>
<!--transition-timing-function: linear;-->
<p>linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau</p>
<div><span style="transition-timing-function: linear;">transition-timing-function: linear;</span></div>
<!--transition-timing-function: ease-in;-->
<p>ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.</p>
<div><span style="transition-timing-function: ease-in;">transition-timing-function: ease-in;</span></div>
<!--transition-timing-function: ease-out;-->
<p>ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.</p>
<div><span style="transition-timing-function: ease-out;">transition-timing-function: ease-out;</span></div>
<!--transition-timing-function: ease-in-out;-->
<p>ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.</p>
<div><span style="transition-timing-function: ease-in-out;">transition-timing-function: ease-in-out;</span></div>
</body>
</html>
Cách chọn transition-timing-function phù hợp cho từng hiệu ứng
Không có một giá trị transition-timing-function phù hợp cho mọi trường hợp. Việc lựa chọn nên dựa vào cảm giác chuyển động mà giao diện cần tạo ra: nhanh hay đều, nhẹ nhàng hay dứt khoát, tự nhiên hay mang tính kỹ thuật. Chọn đúng timing function giúp hiệu ứng dễ nhìn hơn mà không làm người dùng mất tập trung.
Chọn hiệu ứng chuyển động cho nút và liên kết
Với nút bấm và liên kết, hiệu ứng thường cần phản hồi nhanh để người dùng cảm nhận được trạng thái thay đổi ngay lập tức. ease là lựa chọn an toàn cho các hiệu ứng như đổi màu, thay đổi độ trong suốt hoặc dịch chuyển nhẹ.
Nếu muốn chuyển động diễn ra đều từ đầu đến cuối, có thể dùng linear. Tuy nhiên, hiệu ứng quá đều đôi khi tạo cảm giác máy móc, vì vậy nên cân nhắc dựa trên đặc điểm của thành phần giao diện.
Chọn timing function cho menu và thành phần giao diện
Menu, hộp thông báo, tooltip hoặc các thành phần xuất hiện theo chuyển động thường phù hợp với kiểu chuyển đổi có điểm bắt đầu và kết thúc mềm mại. ease-out có thể tạo cảm giác thành phần xuất hiện nhanh rồi chậm dần, giúp giao diện phản hồi rõ mà vẫn tự nhiên.
Ngược lại, khi thành phần bắt đầu chuyển động từ trạng thái đứng yên và cần tăng tốc dần, ease-in có thể phù hợp hơn. Với những chuyển động cần cả tăng tốc lẫn giảm tốc, ease-in-out thường đem lại cảm giác cân bằng.
Khi nào nên dùng ease, linear và cubic-bezier?
ease thích hợp khi cần một hiệu ứng phổ biến, mềm mại và không muốn tinh chỉnh quá nhiều. Đây thường là điểm bắt đầu tốt cho các tương tác cơ bản.
linear phù hợp với những chuyển động cần tốc độ ổn định trong toàn bộ thời gian chuyển tiếp, chẳng hạn một số hiệu ứng trực quan liên tục.
cubic-bezier() nên được dùng khi các giá trị có sẵn chưa tạo ra đúng cảm giác mong muốn. Cách này cho phép kiểm soát đường cong tăng tốc và giảm tốc để tạo chuyển động riêng cho từng thành phần.
button {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
button:hover {
transform: translateY(-3px);
}
Phối hợp transition-timing-function với transition-duration
transition-timing-function quyết định cách tốc độ thay đổi trong quá trình chuyển tiếp, còn transition-duration quyết định hiệu ứng kéo dài bao lâu. Hai thuộc tính này nên được cân chỉnh cùng nhau thay vì lựa chọn độc lập.
Một timing function phù hợp nhưng thời lượng quá dài có thể khiến giao diện phản hồi chậm. Ngược lại, thời lượng quá ngắn khiến đường cong chuyển động khó thể hiện rõ. Với các tương tác nhỏ như nút, liên kết hoặc trạng thái hover, thời lượng vừa phải thường giúp hiệu ứng nhanh và dễ nhận biết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transition-timing-function 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 *
