Bùi Tấn Lực - 133
- 09/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính animation-direction trong CSS
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á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:
<!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:
<!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:
<!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:
<!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>
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
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thuộc tính animation-direction trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
