Chuyển tiếp-thời gian-chức năng - Thủ thuật CSS

Các transition-timing-functionbất động sản, thường được sử dụng như một phần của transitiontốc ký, được sử dụng để xác định một chức năng mô tả làm thế nào một quá trình chuyển đổi sẽ được tiến hành trong thời gian đó, cho phép một sự chuyển tiếp đến tốc độ thay đổi trong suốt khóa học của mình.

.example ( transition-timing-function: ease-out; )

Các hàm thời gian này thường được gọi là hàm nới lỏng và có thể được xác định bằng cách sử dụng giá trị từ khóa được xác định trước, hàm bước hoặc đường cong Bézier khối.

Các giá trị từ khóa xác định trước được phép là:

giảm bớt
tuyến tính
dễ dàng trong
thoải mái
dễ vào
bước bắt đầu
bước cuối

Đối với một số giá trị, hiệu ứng có thể không rõ ràng trừ khi thời lượng chuyển đổi được đặt thành giá trị lớn hơn.

Mỗi từ khóa được xác định trước có giá trị đường cong Bézier khối tương đương hoặc giá trị hàm bước tương đương. Ví dụ: hai giá trị hàm định thời sau sẽ tương đương với nhau:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Như hai điều sau:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Sử dụng bước () và đường cong Bézier

Các steps()chức năng cho phép bạn chỉ định khoảng thời gian cho các chức năng thời gian. Nó nhận một hoặc hai tham số, được phân tách bằng dấu phẩy: một số nguyên dương và một giá trị tùy chọn của một trong hai starthoặc end. Nếu không có tham số thứ hai được bao gồm, nó sẽ mặc định là end.

Để hiểu các hàm bước, đây là bản trình diễn sử dụng steps(4, start)cho hộp bên trái và steps(4, end)hộp bên phải (di chuột qua hộp hoặc tải lại khung để xem các chuyển đổi):

Kiểm tra cây bút này!

Khi startđược chỉ định, sự thay đổi của các giá trị xảy ra ở đầu mỗi khoảng thời gian, trong khi endkhiến cho sự thay đổi giá trị xảy ra ở cuối mỗi khoảng thời gian.

Một cái nhìn chi tiết về các giá trị đường cong Bézier nằm ngoài phạm vi của tài liệu tham khảo này, tuy nhiên, hãy xem các tài liệu tham khảo trong phần liên kết liên quan để biết các công cụ thể hiện trực quan cách các giá trị này hoạt động.

Để tương thích trong tất cả các trình duyệt hỗ trợ, tiền tố của nhà cung cấp là bắt buộc, với cú pháp tiêu chuẩn được khai báo sau cùng:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (phiên bản ổn định đầu tiên của IE hỗ trợ transition-timing-function) không yêu cầu -ms-tiền tố.