Các transition-durationbấ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 thời gian của quá trình chuyển đổi định. Đó là khoảng thời gian cần thiết để phần tử được nhắm mục tiêu chuyển đổi giữa hai trạng thái xác định.
.example ( transition-duration: 3s; )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)
- Danh sách các giá trị thời gian được phân tách bằng dấu phẩy, để chuyển đổi nhiều thuộc tính trên một phần tử duy nhất
Giá trị mặc định cho transition-durationlà 0s, nghĩa là không có quá trình chuyển đổi nào diễn ra và sự thay đổi thuộc tính sẽ diễn ra ngay lập tức, ngay cả khi các thuộc tính khác liên quan đến chuyển đổi được xác định. Giá trị thời gian có thể được biểu thị dưới dạng số dựa trên thập phân để xác định thời gian chính xác hơn và giá trị âm không được phép.
CodePen sau đây hiển thị hiệu ứng di chuột trên một hộp sử dụng transition-durationgiá trị 1sđể thay đổi dần màu nền:
Để 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-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (phiên bản ổn định đầu tiên của IE hỗ trợ transition-duration) không yêu cầu -ms-tiền tố.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |