Thuộc tính transition-property trong CSS

Định nghĩa và cách sử dụng

Thuộc tính transition-property quy định tên thuộc tính CSS được sử dụng để tạo hiệu ứng chuyển đổi. (Khi thuộc tính CSS được chỉ định thay đổi, hiệu ứng chuyển đổi sẽ bắt đầu).

Lưu ý:Hiệu ứng chuyển đổi thường xảy ra khi người dùng di chuyển con trỏ chuột lên phần tử.

Ghi chú:Luôn đặt transition-duration Nếu không có thuộc tính nào được chỉ định, thời gian sẽ là 0 và không tạo ra hiệu ứng chuyển đổi.

Xem thêm:

Hướng dẫn CSS:Quá trình chuyển đổi trong CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính transitionProperty

Mô hình

Đặt con trỏ chuột trên phần tử div, sẽ tạo ra hiệu ứng chuyển đổi mượt mà thay đổi độ rộng của phần tử:

div {
  transition-property: width;
}

Thử ngay

Cú pháp CSS

transition-property: none|all|property;

Giá trị thuộc tính

Giá trị Mô tả
none Không có thuộc tính nào nhận được hiệu ứng chuyển đổi.
all Tất cả các thuộc tính sẽ nhận được hiệu ứng chuyển đổi.
property Định nghĩa danh sách các thuộc tính CSS được sử dụng để tạo hiệu ứng chuyển đổi, danh sách được phân隔 bằng dấu phẩy.

Chi tiết kỹ thuật

Giá trị mặc định: all
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.transitionProperty="width,height"

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu với tiền tố -webkit-、-moz- hoặc -o- biểu thị phiên bản đầu tiên của tiền tố được sử dụng.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-