Animation timing function: linear
Giá trị linear của animation-timing-function làm animation chạy với **tốc độ không đổi từ đầu đến cuối**. Không gia tốc, không giảm tốc - chuyển động cơ học, đều đặn.
Khi nào dùng linear?
- Loading spinner, progress bar quay vòng.
- Animation lặp lại vô hạn (infinite) như marquee, news ticker.
- Chuyển động cơ học: bánh xe quay, con lắc dao động.
- Khi cần tính toán chính xác vị trí theo thời gian.
Ví dụ hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate-reverse;
animation-iteration-count: 3;
}
@keyframes myanim {
from { left: 100px; }
to { left: 200px; }
}
#demo {
animation-timing-function: linear;
}
</style>
</head>
</head>
<body>
<div id="demo">linear effect</div>
</body>
</html>So sánh các timing function phổ biến
/* Mặc định - tự nhiên nhất */
animation-timing-function: ease;
/* Tùy chỉnh với cubic-bezier */
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* ease-out (Material Design) */
animation-timing-function: cubic-bezier(0.4, 0, 1, 1); /* ease-in */
animation-timing-function: cubic-bezier(0, 0, 1, 1); /* linear */
Lưu ý hiệu suất
linear nhẹ nhất về tính toán, nhưng ít "tự nhiên" cho giao diện người dùng. Ưu tiên ease, ease-out cho UX tốt hơn.