Thuộc tính transition trong CSS
Trần Thị Vân - 1217
- 15/07/2025
Chức năng của Thuộc tính transition trong CSS
Thuộc tính transition trong CSS dùng để tạo hiệu ứng mượt mà trên các phần tử HTML khi có thay đổi về chiều rộng, màu nền, chiều cao,...
Cú pháp của Thuộc tính transition trong CSS
transition: [property] [duration] [timing-function] [delay];
property: Thuộc tính CSS bạn muốn áp dụng hiệu ứng chuyển đổi như width, height, color, background-color, hoặc all cho tất cả thuộc tính.
duration: Thời gian diễn ra hiệu ứng, thường tính bằng giây (s) hoặc mili giây (ms), ví dụ 1s, 2s, 0.5s.
timing-function: Các kiểu nhanh chậm trong các giai đoạn: bắt đầu, giữa, kết thúc, bao gồm các giá trị dưới đây:
ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).
linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.
ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.
ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.
delay: Thời gian chờ trước khi diễn ra hiệu ứng, thường tính bằng giây (s) hoặc mili giây (ms), ví dụ 1s, 2s, 0.5s.
Code Thuộc tính transition trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px}
p{margin:0px;padding:15px; background:green; width:250px;color:#fff}
p:hover{width:100%}
span{width:100%; float:left; margin:0px;padding:15px; background-color:green; width:100%;color:#fff}
span:hover{background-color:blue}
</style>
</head>
<body>
<h1>Code Thuộc tính transition trong CSS</h1>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây-->
<div><p style="transition: width 2s">transition: width 2s</p></div>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc-->
<div><p style="transition: width 2s ease-in-out">transition: width 2s ease-in-out</p></div>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc, chờ 1 giây-->
<div><p style="transition: width 2s ease-in-out 1s">transition: width 2s ease-in-out 1s</p></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây-->
<div><span style="transition: background-color 2s">transition: background-color 2s</span></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu-->
<div><span style="transition: background-color 2s ease-in">transition: background-color 2s ease-in</span></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu, chờ 1 giây-->
<div><span style="transition: background-color 2s ease-in 1s">transition: background-color 2s ease-in 1s</span></div>
</body>
</html>
Những lỗi thường gặp khi sử dụng transition trong CSS
Hiệu ứng chuyển đổi chỉ hoạt động khi CSS có sự thay đổi giữa hai trạng thái. Tuy nhiên, một số lỗi về thuộc tính, giá trị hoặc cách áp dụng có thể khiến hiệu ứng không chạy, bị giật hoặc tạo cảm giác không tự nhiên.
Vì sao hiệu ứng transition không hoạt động?
Một nguyên nhân phổ biến là đặt transition trên trạng thái thay đổi thay vì phần tử ban đầu. Khi đó, hiệu ứng có thể chỉ hoạt động theo một chiều hoặc không cho kết quả như mong muốn.
Chẳng hạn, nếu muốn nút thay đổi màu khi người dùng đưa chuột vào, nên đặt transition ở phần tử gốc và dùng :hover để thay đổi màu:
.button {
background: #333;
color: #fff;
transition: background 0.3s ease;
}
.button:hover {
background: #f4a300;
}
Ngoài ra, cần kiểm tra xem thuộc tính đang thay đổi có hỗ trợ chuyển tiếp hay không. Những thay đổi dạng bật hoặc tắt như display: none thường không tạo được hiệu ứng chuyển đổi trực tiếp.
Transition bị giật hoặc không mượt
Hiệu ứng bị giật thường xuất hiện khi chuyển tiếp quá nhiều thuộc tính cùng lúc hoặc sử dụng những thuộc tính khiến trình duyệt phải tính toán lại bố cục liên tục. Các thay đổi về kích thước, vị trí hoặc bố cục phức tạp có thể làm hiệu ứng kém mượt trên thiết bị yếu.
Trong nhiều trường hợp, có thể ưu tiên transform và opacity để tạo chuyển động nhẹ nhàng hơn. Thời gian chuyển đổi cũng không nên đặt quá dài vì sẽ khiến thao tác của người dùng có cảm giác chậm.
Thay vì áp dụng transition cho mọi thuộc tính, chỉ nên chọn những thuộc tính thực sự cần chuyển đổi:
.box {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.box:hover {
transform: translateY(-5px);
opacity: 0.9;
}
Cách tránh lạm dụng transition trong giao diện
Transition nên hỗ trợ người dùng nhận biết sự thay đổi, không nên trở thành hiệu ứng trang trí xuất hiện ở mọi thành phần. Việc áp dụng quá nhiều chuyển động có thể khiến giao diện rối mắt và làm thao tác trở nên chậm chạp.
Với các thành phần tương tác như nút bấm, liên kết, menu hoặc thẻ nội dung, nên sử dụng thời gian ngắn và nhất quán. Những hiệu ứng quan trọng cần được ưu tiên, còn các phần tử không mang lại thêm giá trị khi chuyển động thì không nhất thiết phải dùng transition.
Một giao diện tốt không nằm ở việc có nhiều hiệu ứng, mà ở cách transition được dùng đúng thời điểm để làm rõ trạng thái và giúp thao tác trở nên tự nhiên hơn.
Lời kết
Cảm ơn bạn đã tham khảo bài viết Thuộc tính transition 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 *
