Độ trễ chuyển tiếp - Thủ thuật CSS

Anonim

Các transition-delaybấ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 khoảng thời gian để trì hoãn sự khởi đầu của một quá trình chuyển đổi.

.delay-me ( transition-delay: 0.25s; )

Giá trị có thể là một trong những giá trị sau:

  • Giá trị thời gian hợp lệ được xác định bằng giây hoặc mili giây, ví dụ: 1.3shoặc125ms
  • Danh sách các giá trị thời gian được phân tách bằng dấu phẩy, để xác định các giá trị trễ riêng biệt trên nhiều quá trình chuyển đổi cho một phần tử đơn lẻ, ví dụ: 1s background-color, 350ms transform

Giá trị mặc định cho transition-delaylà 0s, nghĩa là không có độ trễ nào diễn ra và quá trình chuyển đổi sẽ bắt đầu xảy ra ngay lập tức. Giá trị thời gian có thể được biểu thị dưới dạng số dựa trên thập phân để tính thời gian chính xác hơn.

Khi một quá trình chuyển đổi có giá trị độ trễ là âm, nó sẽ khiến quá trình chuyển đổi bắt đầu ngay lập tức (không có độ trễ), tuy nhiên, quá trình chuyển đổi sẽ bắt đầu từng phần của quá trình, như thể nó đã bắt đầu.

Bút sau đây hiển thị hiệu ứng di chuột trên một hộp sử dụng transition-delaygiá trị 2svới thời lượng chuyển tiếp là 1s:

Xem bản trình diễn
độ trễ của Pen Transition bằng CSS-Tricks (@ css-trick)
trên CodePen.

Bây giờ, hãy so sánh nó với bản demo sau, có độ trễ -1svà khoảng thời gian là 3s:

Xem bản
trình diễn độ trễ chuyển tiếp âm Pen của CSS-Tricks (@ css-trick)
trên CodePen.

Lưu ý rằng trong ví dụ thứ hai, chỉ có hai phần ba cuối cùng của quá trình chuyển đổi thực tế được hiển thị và không có độ trễ. Giá trị âm loại bỏ độ trễ và cắt giảm thời lượng một cách hiệu quả.

Để 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-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

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

Một trường hợp sử dụng phổ biến là quá trình chuyển đổi bị đình trệ:

Xem
Hoạt hình so le bằng bút của Chris Coyier (@chriscoyier)
trên CodePen.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
4* 5 * 10 12 5.1 *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 2.1 * 6,0-6,1 *