Thuộc tính animation-play-state trong CSS
Bùi Tấn Lực - 831
- 09/10/2025
Chức năng của Thuộc tính animation-play-state trong CSS
Thuộc tính animation-play-state trong CSS dùng paused để dừng một animation đang chạy, dùng running để chạy một animation đang dừng.
Cú pháp của Thuộc tính animation-play-state trong CSS
animation-play-state: giatri;
giatri: Giá trị để dừng một animation đang chạy hoặc chạy một animation đang dừng (Ví dụ: paused, running)
Các giá trị của Thuộc tính animation-play-state trong CSS
paused: Dùng để dừng một animation đang chạy.
running: Dùng để chạy một animation đang dừng.
Code Thuộc tính animation-play-state trong CSS
Giá trị paused của thuộc tính animation-play-state trong CSS
Dùng để dừng một animation đang chạy:
animation-play-state: paused;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị paused của thuộc tính animation-play-state 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: 4s; /* Thời gian diễn ra animation là 4s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
#chayngang2 {
width: 200px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
animation-duration: 4s; /* Thời gian diễn ra animation là 4s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
#chayngang:hover{animation-play-state: paused; /*Dừng animation */}
#chayngang2:hover{animation-play-state: paused; /*Dừng animation */}
@keyframes chayngang{
from {left: 0px;}
to {left: 200px;}
}
@keyframes chayngang2{
0% {left: 0px;}
100% {left: 200px;}
}
</style>
</head>
<body>
<h1>Giá trị paused của thuộc tính animation-play-state trong CSS</h1>
<p>Dùng để dừng một animation đang chạy, Rê chuột vào nút để dừng animation:</p>
<div id="chayngang">animation-play-state: paused;</div>
<div id="chayngang2">animation-play-state: paused;</div>
</body>
</html>
Giá trị running của thuộc tính animation-play-state trong CSS
Dùng để chạy một animation đang dừng:
animation-play-state: running;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị running của thuộc tính animation-play-state 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: 4s; /* Thời gian diễn ra animation là 4s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-play-state: paused; /*Dừng animation */
}
#chayngang2 {
width: 200px;
height: 50px;
margin-bottom:10px;
line-height:50px;
text-align:center;
background: red;
position: relative;
animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
animation-duration: 4s; /* Thời gian diễn ra animation là 4s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
animation-play-state: paused; /*Dừng animation */
}
#chayngang:hover{animation-play-state: running; /*Chạy animation */}
#chayngang2:hover{animation-play-state: running; /*Chạy animation */}
@keyframes chayngang{
from {left: 0px;}
to {left: 200px;}
}
@keyframes chayngang2{
0% {left: 0px;}
100% {left: 200px;}
}
</style>
</head>
<body>
<h1>Giá trị running của thuộc tính animation-play-state trong CSS</h1>
<p>Dùng để chạy một animation đang dừng, Rê chuột vào nút để chạy animation:</p>
<div id="chayngang">animation-play-state: running;</div>
<div id="chayngang2">animation-play-state: running;</div>
</body>
</html>
Ứng dụng animation-play-state trong thực tế
animation-play-state hữu ích khi cần chủ động kiểm soát trạng thái chạy của một hiệu ứng CSS thay vì để animation hoạt động liên tục. Tùy tình huống, bạn có thể cho hiệu ứng tạm dừng, tiếp tục hoặc kết hợp với các tương tác khác trên trang.
Tạm dừng animation khi người dùng tương tác
Một cách ứng dụng phổ biến là tạm dừng animation tại thời điểm người dùng đưa chuột vào một phần tử. Điều này giúp người xem có thêm thời gian quan sát nội dung đang chuyển động, đặc biệt với banner, danh sách chạy hoặc hiệu ứng có chu kỳ dài.
Chẳng hạn, animation được thiết lập chạy bình thường và chuyển sang trạng thái paused khi phần tử được hover:
.box {
animation: move 3s linear infinite;
}
.box:hover {
animation-play-state: paused;
}
Khi con trỏ rời khỏi phần tử, trạng thái trở lại running theo thiết lập ban đầu và animation tiếp tục từ vị trí đang dừng, thay vì phát lại từ đầu.
Kết hợp animation-play-state với hiệu ứng hover
Kết hợp animation-play-state với :hover giúp tạo các tương tác trực quan mà không cần thêm JavaScript. Cách này phù hợp với những thành phần cần chuyển động liên tục nhưng vẫn cho phép người dùng chủ động kiểm soát khi tương tác.
Ví dụ, một phần tử có thể liên tục xoay và dừng chuyển động khi người dùng di chuột lên:
.icon {
animation: rotate 2s linear infinite;
}
.icon:hover {
animation-play-state: paused;
}
Điểm đáng chú ý là việc tạm dừng chỉ làm ngừng tiến trình của animation tại thời điểm hiện tại. Khi tiếp tục chạy, hiệu ứng sẽ đi tiếp từ trạng thái đã dừng, nhờ đó chuyển động liền mạch và tự nhiên hơn.
Điều khiển animation bằng JavaScript
Khi cần điều khiển animation theo một sự kiện phức tạp hơn, JavaScript có thể thay đổi giá trị animationPlayState của phần tử. Cách này cho phép tạo nút phát, tạm dừng hoặc tiếp tục animation dựa trên hành động cụ thể của người dùng.
const box = document.querySelector('.box');
box.style.animationPlayState = 'paused';
Để cho animation chạy tiếp, có thể chuyển trạng thái về running:
box.style.animationPlayState = 'running';
Cách điều khiển này đặc biệt hữu ích khi trạng thái animation không chỉ phụ thuộc vào hover mà còn liên quan đến nút bấm, sự kiện trên giao diện hoặc logic xử lý của ứng 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-play-state 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 *
