transition-property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Thuộc tính transition-property của CSS đặt các thuộc tính CSS mà hiệu ứng chuyển đổi sẽ được áp dụng.
Try it
transition-property: margin-right;
transition-property: margin-right, color;
transition-property: all;
transition-property: none;
<section id="default-example">
<div id="example-element">Hover to see<br />the transition.</div>
</section>
#example-element {
background-color: #e4f0f5;
color: black;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #990099;
color: white;
margin-right: 40%;
}
Nếu bạn chỉ định một thuộc tính viết tắt (ví dụ: background) thì tất cả các thuộc tính con dài hạn có thể hoạt hình của nó đều sẽ được áp dụng.
Cú pháp
/* Giá trị từ khóa */
transition-property: none;
transition-property: all;
/* Giá trị <custom-ident> */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* Nhiều giá trị */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
all,
-moz-specific,
sliding;
/* Giá trị toàn cục */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
Giá trị
none-
Không có thuộc tính nào sẽ được chuyển đổi.
all-
Tất cả các thuộc tính có thể chuyển đổi đều sẽ được áp dụng.
<custom-ident>-
Một chuỗi xác định thuộc tính mà hiệu ứng chuyển đổi sẽ được áp dụng khi giá trị của nó thay đổi.
Định nghĩa chính thức
| Initial value | all |
|---|---|
| Applies to | all elements, ::before and ::after pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Cú pháp chính thức
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
Ví dụ
Ví dụ cơ bản
Khi nút được di chuột qua hoặc được lấy tiêu điểm, nó trải qua một chuyển đổi màu trong một giây; transition-property là background-color.
HTML
<button class="target">Lấy tiêu điểm!</button>
CSS
.target {
transition-property: background-color;
transition-duration: 1s;
background-color: #cccccc;
}
.target:hover,
.target:focus {
background-color: #eeeeee;
}
Xem hướng dẫn Sử dụng CSS transitions để biết thêm ví dụ về transition-property.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Transitions Module Level 1 # transition-property-property |