Thuộc tính transition-property trong CSS
Bùi Tấn Lực - 797
- 11/10/2025
Chức năng của Thuộc tính transition-property trong CSS
Thuộc tính transition-property trong CSS dùng để quy định những thuộc tính css nào được chuyển đổi trong một hiệu ứng transition.
Cú pháp của Thuộc tính transition-property trong CSS
transition-property: giatri1, giatri2, giatri3,...;
giatri1, giatri2, giatri3: Giá trị css, ít nhất sẽ chứa 1 giá trị css cần chuyển đổi trong một hiệu ứng transition .
Ví dụ: transition-property:width;
Ví dụ: transition-property:width, height;
Code Thuộc tính transition-property trong CSS
transition-property:background-color;
transition-property:width;
transition-property:height;
transition-property:width, height;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-property 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}
#background-color{margin:0px; padding:15px; background:green; width:100%; color:#fff; transition-duration: 2s;}
#background-color:hover{background-color:blue}
#id-width{margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-width:hover{width:100%}
#id-height{margin:0px; padding:15px; height:50px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-height:hover{height:100px}
#id-width-height{margin:0px; padding:15px; height:50px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-width-height:hover{height:100px; width:100%}
</style>
</head>
<body>
<h1>Code Thuộc tính transition-property trong CSS</h1>
<p>Dùng để quy định những thuộc tính css nào được chuyển đổi trong một hiệu ứng transition, hãy rê chuột vào ô màu xanh để xem những thuộc tính css nào được chuyển đổi:</p>
<!--Thuộc tính css: background-color-->
<div><p id="background-color" style="transition-property:background-color;">transition-property:background-color;</p></div>
<!--Thuộc tính css: width-->
<div><p id="id-width" style="transition-property:width;">transition-property:width;</p></div>
<!--Thuộc tính css: height-->
<div><p id="id-height" style="transition-property:height;">transition-property:height;</p></div>
<!--Thuộc tính css: width, height-->
<div><p id="id-width-height" style="transition-property:width, height;">transition-property:width, height;</p></div>
</body>
</html>
Cách sử dụng transition-property trong CSS hiệu quả
Để transition-property phát huy đúng tác dụng, bạn nên xác định rõ thuộc tính nào cần chuyển đổi thay vì áp dụng hiệu ứng một cách dàn trải. Cách này giúp giao diện chuyển động có chủ đích, dễ kiểm soát và tránh tạo hiệu ứng không cần thiết.
Chỉ định một thuộc tính CSS với transition-property
Khi chỉ muốn tạo hiệu ứng cho một thuộc tính, hãy ghi trực tiếp tên thuộc tính đó vào transition-property. Đây là lựa chọn phù hợp với những tương tác đơn giản như đổi màu nút khi người dùng đưa chuột vào.
.button {
background-color: #333;
transition-property: background-color;
transition-duration: 0.3s;
}
.button:hover {
background-color: #007bff;
}
Trong ví dụ này, chỉ background-color được chuyển đổi theo thời gian. Những thuộc tính khác thay đổi trong trạng thái :hover sẽ không tự động nhận hiệu ứng transition.
Chuyển đổi nhiều thuộc tính CSS cùng lúc
Nếu một thành phần cần thay đổi đồng thời nhiều đặc điểm, có thể liệt kê các thuộc tính cách nhau bằng dấu phẩy. Cách viết này giúp kiểm soát chính xác những giá trị được phép chuyển đổi.
.card {
width: 200px;
opacity: 0.8;
transition-property: width, opacity;
transition-duration: 0.4s;
}
.card:hover {
width: 260px;
opacity: 1;
}
Ở đây, width và opacity cùng được chuyển đổi khi trạng thái của phần tử thay đổi. Nếu có thêm một thuộc tính khác thay đổi nhưng không nằm trong danh sách, thuộc tính đó sẽ thay đổi mà không có hiệu ứng chuyển tiếp.
Kết hợp transition-property với các thuộc tính transition khác
transition-property chỉ xác định những thuộc tính được chuyển đổi, còn thời gian và cách diễn ra hiệu ứng được điều khiển bởi các thuộc tính như transition-duration, transition-timing-function và transition-delay.
.menu {
transform: translateX(0);
opacity: 1;
transition-property: transform, opacity;
transition-duration: 0.4s;
transition-timing-function: ease;
}
.menu:hover {
transform: translateX(10px);
opacity: 0.7;
}
Việc tách riêng từng thành phần giúp bạn dễ điều chỉnh hiệu ứng theo mục đích thiết kế. Trong đó, transition-property quyết định cái gì thay đổi có chuyển tiếp, còn các thuộc tính transition khác quyết định hiệu ứng diễn ra như thế nào.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transition-property 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 *
