Chuyển tiếp - Thủ thuật CSS

Các transitionbất động sản là một tài sản viết tắt dùng để biểu diễn lên đến bốn thuộc tính longhand chuyển tiếp liên quan đến:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Các thuộc tính chuyển tiếp này cho phép các phần tử thay đổi giá trị trong một khoảng thời gian cụ thể, tạo hiệu ứng cho các thay đổi thuộc tính, thay vì để chúng xảy ra ngay lập tức. Đây là một ví dụ đơn giản chuyển đổi màu nền của một phần tử trên: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Div đó sẽ mất nửa giây khi chuột qua nó để chuyển từ đỏ sang xanh. Dưới đây là một minh chứng trực tiếp về sự chuyển đổi như vậy:

Xem Bản trình diễn chuyển đổi bút của Louis Lazaris (@impressionwebs) trên CodePen.

Bạn có thể chỉ định một thuộc tính cụ thể như chúng tôi đã nêu ở trên hoặc sử dụng giá trị “tất cả” để chỉ các thuộc tính chuyển tiếp.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Trong ví dụ trên, cả nền và phần đệm sẽ chuyển đổi, do giá trị “tất cả” được chỉ định cho transition-propertyphần tốc ký.

Bạn có thể dấu phẩy các bộ giá trị riêng biệt để thực hiện các chuyển đổi khác nhau trên các thuộc tính khác nhau:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Đối với hầu hết các phần, thứ tự của các giá trị không quan trọng - trừ khi một độ trễ được chỉ định. Nếu bạn chỉ định thời gian trễ, trước tiên bạn phải chỉ định khoảng thời gian. Giá trị đầu tiên mà trình duyệt nhận ra là giá trị thời gian hợp lệ sẽ luôn đại diện cho thời lượng. Bất kỳ giá trị thời gian hợp lệ nào tiếp theo sẽ được phân tích cú pháp là độ trễ.

Không thể chuyển đổi một số thuộc tính vì chúng không phải là thuộc tính có thể hoạt hình. Xem thông số kỹ thuật để biết danh sách đầy đủ các thuộc tính có thể hoạt hình.

Bằng cách chỉ định quá trình chuyển đổi trên chính phần tử, bạn xác định quá trình chuyển đổi xảy ra theo cả hai hướng. Nghĩa là, khi các kiểu được thay đổi (ví dụ khi di chuột vào), các thuộc tính của chúng sẽ chuyển tiếp và khi các kiểu thay đổi trở lại (ví dụ: khi di chuột ra) chúng sẽ chuyển tiếp. Ví dụ: các chuyển đổi demo sau khi di chuột, nhưng không phải khi di chuột ra:

Xem Pen zohgt của Louis Lazaris (@impressionwebs) trên CodePen.

Điều này xảy ra bởi vì quá trình chuyển đổi đã được chuyển đến :hoverbộ chọn trạng thái và không có quá trình chuyển đổi phù hợp nào trên bộ chọn nhắm mục tiêu trực tiếp đến phần tử mà không có :hovertrạng thái.

Để 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: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

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