Thuộc tính animation-direction trong CSS
Bùi Tấn Lực - 1422
- 09/10/2025
Chức năng của Thuộc tính animation-direction trong CSS
Thuộc tính animation-direction trong CSS dùng để quy định hướng di chuyển của một animation sau mỗi lần lặp.
Cú pháp của Thuộc tính animation-direction trong CSS
animation-direction: giatri;
giatri: Giá trị để quy định hướng di chuyển của một animation sau mỗi lần lặp (Ví dụ: normal, reverse, alternate, alternate-reverse)
Các giá trị của Thuộc tính animation-direction trong CSS
normal: Mỗi lần di chuyển theo chiều kim đồng hồ, từ trái qua phải.
reverse: Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái.
alternate: Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái.
alternate-reverse: Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải.
Code Thuộc tính animation-direction trong CSS
Giá trị normal của thuộc tính animation-direction trong CSS
Mỗi lần di chuyển theo chiều kim đồng hồ, từ trái qua phải:
animation-direction: normal;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị normal của thuộc tính animation-direction trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
width: 200px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: normal; /*Mỗi lần di chuyển theo chiều kim đồng hồ, từ trái qua phải*/
}
#chayvongtron {
width: 200px;
height: 50px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayvongtron; /* Áp dụng animation có tên "chayvongtron" */
animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: normal; /*Mỗi lần di chuyển theo chiều kim đồng hồ, từ trái qua phải*/
}
@keyframes chayngang{
from {background: red;left: 0px;}
to {background: yellow;left: 200px;}
}
@keyframes chayvongtron{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 100px;}
75% {background: green; left: 0px; top: 100px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Giá trị normal của thuộc tính animation-direction trong CSS</h1>
<p>Mỗi lần di chuyển theo chiều kim đồng hồ, từ trái qua phải</p>
<div id="chayngang">animation-direction: normal;</div>
<div id="chayvongtron">animation-direction: normal;</div>
</body>
</html>
Giá trị reverse của thuộc tính animation-direction trong CSS
Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái:
animation-direction: reverse;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị reverse của thuộc tính animation-direction trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
width: 200px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: reverse; /*Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
#chayvongtron {
width: 200px;
height: 50px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayvongtron; /* Áp dụng animation có tên "chayvongtron" */
animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: reverse; /*Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
@keyframes chayngang{
from {background: red;left: 0px;}
to {background: yellow;left: 200px;}
}
@keyframes chayvongtron{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 100px;}
75% {background: green; left: 0px; top: 100px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Giá trị reverse của thuộc tính animation-direction trong CSS</h1>
<p>Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>
<div id="chayngang">animation-direction: reverse;</div>
<div id="chayvongtron">animation-direction: reverse;</div>
</body>
</html>
Giá trị alternate của thuộc tính animation-direction trong CSS
Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái:
animation-direction: alternate;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate của thuộc tính animation-direction trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
width: 200px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
#chayvongtron {
width: 200px;
height: 50px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayvongtron; /* Áp dụng animation có tên "chayvongtron" */
animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
@keyframes chayngang{
from {background: red;left: 0px;}
to {background: yellow;left: 200px;}
}
@keyframes chayvongtron{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 100px;}
75% {background: green; left: 0px; top: 100px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Giá trị alternate của thuộc tính animation-direction trong CSS</h1>
<p>Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>
<div id="chayngang">animation-direction: alternate;</div>
<div id="chayvongtron">animation-direction: alternate;</div>
</body>
</html>
Giá trị alternate-reverse của thuộc tính animation-direction trong CSS
Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải:
animation-direction: alternate-reverse;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate-reverse của thuộc tính animation-direction trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
width: 260px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải*/
}
#chayvongtron {
width: 260px;
height: 50px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayvongtron; /* Áp dụng animation có tên "chayvongtron" */
animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-direction: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải*/
}
@keyframes chayngang{
from {background: red;left: 0px;}
to {background: yellow;left: 200px;}
}
@keyframes chayvongtron{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 100px;}
75% {background: green; left: 0px; top: 100px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Giá trị alternate-reverse của thuộc tính animation-direction trong CSS</h1>
<p>Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải</p>
<div id="chayngang">animation-direction: alternate-reverse;</div>
<div id="chayvongtron">animation-direction: alternate-reverse;</div>
</body>
</html>
Cách sử dụng animation-direction hiệu quả trong CSS
Hiệu quả của animation-direction không chỉ nằm ở việc chọn đúng một giá trị, mà còn phụ thuộc vào cách hướng chuyển động phối hợp với số lần lặp và nhịp chuyển động. Khi xây dựng hiệu ứng thực tế, nên xác định trước phần tử cần di chuyển theo một chiều cố định hay cần tạo cảm giác chuyển động qua lại.
Khi nào nên sử dụng giá trị normal và reverse
normal phù hợp khi hiệu ứng cần lặp lại cùng một tiến trình từ đầu đến cuối. Đây là lựa chọn đơn giản cho các hiệu ứng như biểu tượng chạy theo một hướng, thanh tải chuyển động hoặc phần tử xuất hiện theo một trình tự cố định.
Ngược lại, reverse hữu ích khi muốn chạy cùng một chuỗi chuyển động theo hướng ngược lại mà không phải viết thêm một bộ @keyframes. Cách này giúp tận dụng lại animation đã có, đặc biệt khi giao diện cần hai phần tử có chuyển động đối lập.
Khi nào nên sử dụng alternate và alternate-reverse
alternate thích hợp với những hiệu ứng cần chuyển động qua lại tự nhiên. Sau mỗi lần chạy, animation đổi chiều thay vì quay lại trạng thái ban đầu rồi bắt đầu lại, vì vậy chuyển động thường liền mạch hơn.
alternate-reverse có cách hoạt động tương tự nhưng bắt đầu từ chiều ngược lại. Giá trị này hữu ích khi muốn giữ nguyên một animation nhưng cần thay đổi điểm xuất phát của chuyển động.
Kết hợp animation-direction với animation-iteration-count
animation-iteration-count quyết định animation chạy bao nhiêu lần, còn animation-direction quyết định hướng của từng lượt chạy. Hai thuộc tính này nên được xem xét cùng nhau khi tạo hiệu ứng lặp.
Với alternate hoặc alternate-reverse, số lần lặp ảnh hưởng trực tiếp đến việc animation kết thúc ở trạng thái nào. Nếu cần hiệu ứng qua lại liên tục, có thể dùng giá trị infinite; nếu chỉ muốn phần tử thực hiện một số lượt nhất định, hãy chọn số lần lặp cụ thể.
.box {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 4;
animation-direction: alternate;
}
Kết hợp animation-direction với animation-timing-function
animation-direction quyết định chiều thực hiện, trong khi animation-timing-function kiểm soát tốc độ thay đổi trong mỗi lượt. Kết hợp hai thuộc tính giúp chuyển động bớt cứng và phù hợp hơn với mục đích thiết kế.
Chẳng hạn, một phần tử di chuyển qua lại có thể dùng alternate để đổi chiều sau mỗi lượt và ease-in-out để chuyển động tăng tốc, giảm tốc ở hai đầu. Nhờ vậy, hiệu ứng tạo cảm giác mềm mại hơn mà không cần thay đổi cấu trúc @keyframes.Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-direction 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 *
