Thuộc tính animation-timing-function trong CSS
Bùi Tấn Lực - 898
- 09/10/2025
Chức năng của Thuộc tính animation-timing-function trong CSS
Thuộc tính animation-timing-function trong CSS dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối.
Các giá trị của Thuộc tính animation-timing-function trong CSS
linear: Không đổi tốc độ, tương đương với cubic-bezier(0, 0, 1, 1).
ease: Chậm đầu cuối, nhanh ở giữa, tương đương với cubic-bezier(0.25, 0.1, 0.25, 1);.
ease-in: Chậm ở đầu, tương đương với cubic-bezier(0.42, 0, 1, 1);.
ease-out: Chậm ở cuối, tương đương với cubic-bezier(0, 0, 0.58, 1);.
ease-in-out: Chậm ở đầu và cuối, tương đương với cubic-bezier(0.42,0,0.58,1);.
Code Thuộc tính animation-timing-function trong CSS
Các giá trị của thuộc tính animation-timing-function trong CSS
animation-timing-function: linear; Không đổi tốc độ
animation-timing-function: ease; Chậm đầu cuối, nhanh ở giữa
animation-timing-function: ease-in;Chậm ở đầu
animation-timing-function: ease-out;Chậm ở cuối
animation-timing-function: ease-in-out; Chậm ở đầu và cuối
<!DOCTYPE html>
<html>
<head>
<title>Các giá trị của thuộc tính animation-timing-function trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
padding:5px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 8s; /* Thời gian diễn ra animation là 8s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
</style>
</head>
<body>
<h1>Các giá trị của thuộc tính animation-timing-function trong CSS</h1>
<p>Dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối:</p>
<p><span style="animation-timing-function: linear;">linear(Không đổi tốc độ)</span></p>
<p><span style="animation-timing-function: ease;">ease(Chậm đầu cuối, nhanh ở giữa)</span></p>
<p><span style="animation-timing-function: ease-in;">ease-in(Chậm ở đầu)</span></p>
<p><span style="animation-timing-function: ease-out;">ease-out(Chậm ở cuối)</span></p>
<p><span style="animation-timing-function: ease-in-out;">ease-in-out(Chậm ở đầu và cuối)</span></p>
</body>
</html>
Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS
animation-timing-function: cubic-bezier(0, 0, 1, 1); Không đổi tốc độ
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); Chậm đầu cuối, nhanh ở giữa
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);Chậm ở đầu
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);Chậm ở cuối
animation-timing-function: cubic-bezier(0.42,0,0.58,1);Chậm ở đầu và cuối
<!DOCTYPE html>
<html>
<head>
<title>Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
padding:5px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 8s; /* Thời gian diễn ra animation là 8s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
</style>
</head>
<body>
<h1>Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS</h1>
<p>Dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối:</p>
<p><span style="animation-timing-function: cubic-bezier(0, 0, 1, 1);">(0, 0, 1, 1)-linear(Không đổi tốc độ)</span></p>
<p><span style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">(0.25, 0.1, 0.25, 1)-ease(Chậm đầu cuối, nhanh ở giữa)</span></p>
<p><span style="animation-timing-function: cubic-bezier(0.42, 0, 1, 1);">(0.42, 0, 1, 1)-ease-in(Chậm ở đầu)</span></p>
<p><span style="animation-timing-function: cubic-bezier(0, 0, 0.58, 1);">(0, 0, 0.58, 1)-ease-out(Chậm ở cuối)</span></p>
<p><span style="animation-timing-function: cubic-bezier(0.42,0,0.58,1);">(0.42,0,0.58,1)-ease-in-out(Chậm ở đầu và cuối)</span></p>
</body>
</html>
Cách chọn animation-timing-function phù hợp trong CSS
Việc chọn animation-timing-function không chỉ phụ thuộc vào hiệu ứng đẹp hay không mà còn liên quan đến cảm giác chuyển động mà bạn muốn tạo ra. Mỗi giá trị sẽ phù hợp với một kiểu chuyển động khác nhau, vì vậy nên chọn dựa trên mục đích của animation thay vì sử dụng một giá trị cho mọi trường hợp.
Khi nào nên sử dụng linear cho animation?
linear phù hợp khi đối tượng cần chuyển động với tốc độ ổn định từ đầu đến cuối. Giá trị này đặc biệt hữu ích với các hiệu ứng lặp liên tục, trong đó sự thay đổi tốc độ có thể khiến chuyển động thiếu tự nhiên.
Chẳng hạn, bạn có thể dùng linear cho thanh tiến trình, hiệu ứng xoay biểu tượng hoặc một phần tử di chuyển đều trên một quãng đường. Với những chuyển động mang tính tuần hoàn, tốc độ không đổi giúp animation dễ theo dõi và không tạo cảm giác bị tăng hoặc giảm tốc bất ngờ.
.loader {
animation: spin 2s linear infinite;
}
Khi nào nên sử dụng ease, ease-in và ease-out?
Các giá trị ease, ease-in và ease-out thích hợp với những hiệu ứng giao diện cần tạo cảm giác chuyển động mềm mại. Chúng đặc biệt hữu ích khi một phần tử xuất hiện, biến mất hoặc thay đổi vị trí.
- ease: phù hợp với các animation thông thường, có sự thay đổi tốc độ ở cả đầu và cuối.
- ease-in: thích hợp khi muốn chuyển động bắt đầu chậm rồi tăng tốc dần.
- ease-out: phù hợp khi muốn phần tử di chuyển nhanh lúc đầu rồi chậm lại khi kết thúc.
Trong giao diện web, ease-out thường phù hợp với các phần tử vừa xuất hiện hoặc trượt vào vị trí vì phần kết thúc chậm tạo cảm giác nhẹ nhàng hơn. Ngược lại, ease-in có thể hữu ích khi một phần tử chuẩn bị rời khỏi màn hình.
Khi nào nên dùng ease-in-out để tạo chuyển động tự nhiên?
ease-in-out phù hợp khi animation cần bắt đầu chậm, tăng tốc ở giữa rồi giảm tốc trước khi kết thúc. Kiểu chuyển động này tạo cảm giác cân bằng và thường phù hợp với các phần tử thay đổi vị trí hoặc kích thước trong một khoảng thời gian tương đối rõ ràng.
Ví dụ, khi một hộp chuyển từ vị trí này sang vị trí khác, ease-in-out giúp phần tử không xuất hiện với tốc độ quá đột ngột. Chuyển động được phân bổ mềm hơn ở hai đầu, nhờ đó hiệu ứng dễ chịu và tự nhiên hơn.
.box {
animation: move 1.2s ease-in-out;
}
Khi nào nên tùy chỉnh animation bằng cubic-bezier()?
Khi các giá trị có sẵn chưa tạo được đúng cảm giác mong muốn, bạn có thể sử dụng cubic-bezier() để kiểm soát đường cong tốc độ chi tiết hơn. Đây là lựa chọn phù hợp khi cần một chuyển động có cá tính riêng hoặc muốn điều chỉnh chính xác mức độ tăng tốc và giảm tốc.
Ví dụ, một hiệu ứng nút bấm có thể cần phản hồi nhanh rồi giảm tốc rất nhẹ ở cuối. Thay vì thử nhiều giá trị dựng sẵn, bạn có thể tạo một đường cong riêng bằng cubic-bezier().
.button {
animation: press 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
Khi sử dụng cubic-bezier(), nên điều chỉnh dựa trên cảm giác chuyển động thực tế thay vì chỉ tập trung vào thông số. Một đường cong phù hợp là đường cong giúp animation phản hồi rõ ràng, không quá gấp và không tạo độ trễ gây khó chịu cho người dùng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-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 *
