Thuộc tínhanimation-direction CSS xác định hoạt ảnh chạy xuôi, ngược hay luân phiên. Nó kiểm soát luồng hình ảnh và lặp lại hoạt ảnh trên trang web. Giúp tăng cường khả năng trình bày nội dung động.
Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|
initial|inherit;
Property Value
Các giá trị của thuộc tính animation-direction được liệt kê dưới đây:
| Value | Description |
|---|---|
| normal | Hoạt ảnh chạy theo hướng bình thường. Đây là giá trị mặc định. |
| reverse | Hoạt ảnh chạy theo hướng ngược lại. |
| alternate | Hoạt ảnh chạy tiến, sau đó chạy ngược lại. |
| alternate-reverse | Hoạt ảnh chạy ngược lại trước, sau đó chạy tiến. |
| initial | Đặt thuộc tính hoạt ảnh về giá trị mặc định. |
| inherit | Kế thừa thuộc tính hoạt ảnh từ phần tử cha. |
Example: Normal Animation Direction
Ví dụ này sử dụngCSS animation-direction để di chuyển văn bản từ phải sang trái. Hoạt ảnh lặp lại vô hạn, chạy bình thường trên màn hình.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS animation-direction Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
h3 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: normal;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-direction property</h2>
<h3 id="one">This text is normal.</h3>
</body>
</html>
Output:
Example: Reverse Animation Direction
Ví dụ này sử dụng CSS animation-direction đặt thành reverse. Văn bản di chuyển từ trái sang phải lặp vô hạn. Ngược với hướng thông thường.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS animation-direction Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
h3 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: reverse;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-direction property</h2>
<h3 id="one">This text is reverse.</h3>
</body>
</html>
Output:
Example: Alternate Animation Direction
Ví dụ này dùng CSS animation-direction đặt là alternate. Văn bản di chuyển qua lại giữa trái và phải lặp vô hạn.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS animation-direction Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
h3 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: alternate;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-direction property</h2>
<h3 id="one">This text is alternate.</h3>
</body>
</html>
Output:
Example: Alternate-Reverse Animation Direction
Trong ví dụ này, chúng ta sử dụngthuộc tính CSS animation-direction đặt là alternate-reverse. Văn bản đổi hướng liên tục trong một vòng lặp vô hạn. Bắt đầu ngược sau đó tiến.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS animation-direction Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
h3 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: alternate-reverse;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-direction property</h2>
<h3 id="one">This text is alternate-reverse.</h3>
</body>
</html>
Output:
Supported Browser: Các trình duyệt hỗ trợ animation-direction properties được liệt kê dưới đây:
- Google Chrome 43.0 trở lên
- Edge 12.0 trở lên
- Mozilla 16.0 trở lên
- Safari 9.0 trở lên
- Opera 30.0 trở lên