Thuộc tính transition CSS

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

Thuộc tính transition là thuộc tính viết tắt, được sử dụng để thiết lập bốn thuộc tính chuyển đổi:

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

Đặt con trỏ chuột vào phần tử div, độ rộng của nó sẽ từ 100px dần dần tăng lên 300px:

div {
  width: 100px;
  transition: width 2s;
}

transition: property duration timing-function delay;

Giá trị	Mô tả
transition-property	Định nghĩa tên thuộc tính CSS được thiết lập hiệu ứng chuyển đổi.
transition-duration	Định nghĩa số giây hoặc mili giây cần để hoàn thành hiệu ứng chuyển đổi.
transition-timing-function	Định nghĩa đường cong tốc độ của hiệu ứng tốc độ.
transition-delay	Định nghĩa thời điểm bắt đầu hiệu ứng chuyển đổi.

Giá trị mặc định:	all 0 ease 0
Di truyền:	no
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.transition="width 2s"

Số liệu trong bảng ghi chú phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn 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-