Thuộc tính transitionTimingFunction

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

transitionTimingFunction Thuộc tính quy định đường cong tốc độ của hiệu ứng chuyển đổi.

Thuộc tính này cho phép hiệu ứng chuyển đổi thay đổi tốc độ trong suốt thời gian duy trì.

Xem thêm:

Tài liệu tham khảo CSS:Thuộc tính transition-timing-function

Mẫu

Thay đổi đường cong tốc độ của hiệu ứng chuyển đổi:

document.getElementById("myDIV").style.transitionTimingFunction = "linear";

Thử ngay

Ngữ pháp

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

object.style.transitionTimingFunction

Đặt thuộc tính transitionTimingFunction:

object.style.transitionTimingFunction = 
"ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
ease

Giá trị mặc định. Định nghĩa hiệu ứng chuyển đổi bắt đầu chậm, sau đó nhanh, sau đó chậm kết thúc.

Tương đương với: cubic-bezier(0.25, 0.1, 0.25, 1) .
linear

Định nghĩa hiệu ứng chuyển đổi với tốc độ từ đầu đến cuối đều.

Tương đương với: cubic-bezier(0, 0, 1, 1) .
ease-in

Định nghĩa hiệu ứng chuyển đổi bắt đầu chậm.

Tương đương với: cubic-bezier(0.42, 0, 1, 1) .
ease-out

Định nghĩa hiệu ứng chuyển đổi kết thúc chậm.

Tương đương với: cubic-bezier(0, 0, 0.58, 1) .
ease-in-out

Định nghĩa hiệu ứng chuyển đổi bắt đầu và kết thúc chậm.

Tương đương với: cubic-bezier(0.42, 0, 0.58, 1) .
cubic-bezier(n, n, n, n)

Định nghĩa giá trị của bạn trong hàm ba điểm Bezier.

Các giá trị có thể là số từ 0 đến 1.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa 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: ease
Giá trị trả về: chuỗi, biểu thị Thuộc tính transition-timing-function.
Phiên bản CSS: CSS3

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ợ thuộc tính này hoàn toàn.

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