Thuộc tính transition của Style

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

transition Thuộc tính này là thuộc tính viết tắt của bốn thuộc tính chuyển đổi:

Ghi chú:Luôn quy định Thuộc tính transitionDurationNgoài ra, nếu không quy định thời gian, thời gian chuyển đổi sẽ là 0 và hiệu ứng chuyển đổi sẽ không có hiệu lực.

Xem thêm:

Cuốn hướng dẫn CSS:Thuộc tính transition

Mẫu

Đặt con trỏ chuột trên phần tử div để thay đổi dần外观:

document.getElementById("myDIV").style.transition = "all 2s";

Thử ngay

Cú pháp

Trả về thuộc tính transition:

object.style.transition

Đặt thuộc tính transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
transitionProperty Định nghĩa tên thuộc tính CSS mà hiệu ứng chuyển đổi sẽ nhắm đến.
transitionDuration Định nghĩa thời gian cần thiết để hoàn thành hiệu ứng chuyển đổi (giây hoặc mili giây).
transitionTimingFunction Định nghĩa đường cong tốc độ của hiệu ứng chuyển đổi.
transitionDelay Định nghĩa khi hiệu ứng chuyển đổi bắt đầu.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Ghi lại thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: all 0 ease 0
Giá trị trả về: chuỗi, biểu thị cho Thuộc tính transition.
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Số 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.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1