Thuộc tính animation-name trong CSS
Bùi Tấn Lực - 808
- 08/10/2025
Chức năng của Thuộc tính animation-name trong CSS
Thuộc tính animation-name trong CSS dùng để đặt tên cho animation, tên này trùng khớp với tên đặt trong quy tắc @keyframes, tên trong @keyframes dùng để tạo ra một hoặc nhiều hành động cụ thể.
Cú pháp của Thuộc tính animation-name trong CSS
animation-name: ten;
ten: Tên animation, đặt tên gì cũng được (Ví dụ: quaphai, quatrai,.....)
Code Thuộc tính animation-name trong CSS
animation-name: quaPhai;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-name trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#quaphai {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 5s; /* Thời gian diễn ra animation là 5s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
#quatrai {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaTrai; /* Áp dụng animation có tên "quaTrai" */
animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
animation-iteration-count: 2; /*số lần một animation sẽ lặp lại là 2*/
}
@keyframes quaTrai{
from {left: 100%}
to {left: 0px}
}
</style>
</head>
<body>
<h1>Code Thuộc tính animation-name trong CSS</h1>
<p>Dùng để đặt tên cho animation, tên này trùng khớp với tên đặt trong quy tắc @keyframes, tên trong @keyframes dùng để tạo ra một hoặc nhiều hành động cụ thể:</p>
<p><span id="quaphai">animation-name: quaPhai;</span></p>
<p><span id="quatrai">animation-name: quaTrai;</span></p>
</body>
</html>
Những lỗi thường gặp khi sử dụng thuộc tính animation-name trong CSS
Khi animation-name không tạo ra hiệu ứng như mong muốn, nguyên nhân thường không nằm ở riêng thuộc tính này mà liên quan đến cách khai báo @keyframes hoặc các thuộc tính điều khiển animation. Kiểm tra đúng từng thành phần sẽ giúp xác định lỗi nhanh hơn thay vì thay đổi CSS một cách ngẫu nhiên.
Animation-name không hoạt động do sai tên @keyframes
Giá trị của animation-name phải trùng chính xác với tên được khai báo trong @keyframes. Chỉ cần khác một ký tự, viết sai dấu gạch hoặc dùng nhầm tên, trình duyệt sẽ không tìm thấy chuỗi chuyển động tương ứng.
<div class="box">Web Mới</div>
<style>
.box {
animation-name: moveBox;
animation-duration: 2s;
}
@keyframes moveBox {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
Trong ví dụ trên, moveBox ở animation-name phải giống hoàn toàn với tên moveBox của @keyframes. Nếu đổi một bên thành move-box, animation sẽ không sử dụng được keyframes đã khai báo.
Animation không chạy khi chưa khai báo animation-duration
animation-name chỉ xác định chuỗi chuyển động cần sử dụng, không quyết định thời gian hiệu ứng diễn ra. Nếu chưa thiết lập animation-duration, thời lượng mặc định là 0s, khiến người dùng gần như không nhìn thấy animation.
.box {
animation-name: moveBox;
animation-duration: 2s;
}
@keyframes moveBox {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
Vì vậy, khi kiểm tra một animation không hoạt động, nên xem đồng thời animation-name và animation-duration. Nếu keyframes đã đúng nhưng thời lượng vẫn bằng 0, việc thay đổi riêng animation-name sẽ không giải quyết được vấn đề.
Kiểm tra thứ tự và phạm vi khai báo @keyframes
Tên animation cần trỏ đến một quy tắc @keyframes hợp lệ. Khi viết CSS phức tạp, việc đặt nhầm dấu ngoặc hoặc làm hỏng cấu trúc quy tắc trước đó có thể khiến phần @keyframes không được trình duyệt phân tích như dự kiến.
.box {
animation-name: fadeBox;
animation-duration: 1.5s;
}
@keyframes fadeBox {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Cách kiểm tra đơn giản là tách phần animation thành một đoạn CSS ngắn, xác nhận @keyframes có tên đúng và các mốc chuyển động có cú pháp hợp lệ. Sau khi hiệu ứng chạy ổn định mới đưa trở lại stylesheet lớn. Cách này đặc biệt hữu ích khi CSS có nhiều quy tắc kế thừa hoặc nhiều animation cùng lúc.
Cách xử lý khi nhiều animation-name cùng được áp dụng
CSS cho phép khai báo nhiều tên animation trong cùng một thuộc tính bằng dấu phẩy. Khi đó, mỗi animation nên có các thuộc tính liên quan tương ứng. Nếu chỉ kiểm tra một tên mà bỏ qua các animation còn lại, kết quả hiển thị có thể khác với dự kiến.
.box {
animation-name: moveBox, fadeBox;
animation-duration: 2s, 1s;
}
@keyframes moveBox {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
@keyframes fadeBox {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Trong trường hợp này, moveBox và fadeBox là hai animation độc lập nhưng cùng tác động lên một phần tử. Nếu một animation không cho kết quả mong muốn, hãy kiểm tra riêng tên @keyframes, thời lượng và thuộc tính mà animation đó thay đổi. Cách tách từng thành phần sẽ giúp tìm ra lỗi chính xác hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-name 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 *
