Thuộc tính chuyển tiếp - Thủ thuật CSS

Anonim

Các transition-propertybấ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 tài sản gì, hoặc tài sản, bạn muốn áp dụng một hiệu ứng chuyển đến.

Điều này được thực hiện bằng cách cung cấp tên của thuộc tính dưới dạng giá trị:

.example ( transition-property: color; )

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

  • Một tên thuộc tính duy nhất, như trong ví dụ trên
  • Danh sách tên thuộc tính được phân tách bằng dấu phẩy (viết tắt hoặc viết tay dài), để chuyển đổi nhiều thuộc tính trên một phần tử duy nhất
  • Từ khóa nonecho biết rằng không có thuộc tính nào sẽ chuyển đổi
  • Từ khóa allcho biết rằng tất cả các thuộc tính sẽ chuyển đổi (mặc định)

Khi dấu phẩy tách các giá trị, tên tài sản được bản chất ánh xạ tới các thuộc tính chuyển đổi khác theo quy định ( transition-timing-function, transition-durationvà transition-delay). Vì vậy, điều này có nghĩa là nếu danh sách các thuộc tính được phân tách bằng dấu phẩy bao gồm một hoặc nhiều tên thuộc tính không hợp lệ, các thuộc tính khác sẽ vẫn chuyển tiếp và sẽ ánh xạ tới các thuộc tính chuyển tiếp liên quan dự kiến ​​của chúng.

Thông số mô tả điều này bằng cách nói:

“(U) thuộc tính không được công nhận hoặc không thể thay đổi phải được giữ trong danh sách để duy trì sự phù hợp của các chỉ số.”

Khi sử dụng giá trị của nonehoặc các từ khóa phổ biến inherithoặc initial, các giá trị này không thể được sử dụng như một phần của danh sách được phân tách bằng dấu phẩy, nếu không điều này sẽ dẫn đến lỗi cú pháp và toàn bộ dòng sẽ bị bỏ qua.

Để 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-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

IE10 (phiên bản ổn định đầu tiên của IE hỗ trợ transition-property) 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+