CSS transitions

Module CSS transitions quy định chức năng tạo ra các transition (chuyển tiếp) dần dần giữa các giá trị thuộc tính CSS khác nhau. Hành vi của các transition này có thể được kiểm soát bằng cách chỉ định hàm easing, thời gian và các giá trị khác.

Thông thường, khi giá trị của một thuộc tính CSS thay đổi, kết quả của sự thay đổi từ giá trị cũ sang giá trị mới là tức thì. Module CSS transitions cho phép kiểm soát quá trình chuyển đổi từ trạng thái thuộc tính cũ sang trạng thái mới trong một khoảng thời gian được chỉ định. Nó cũng cung cấp các event handler để cho phép mã được chạy để phản hồi với các giai đoạn khác nhau của quá trình transition.

Trong một số trường hợp nhất định, không có giá trị "từ" (from) ban đầu cho một transition. Ví dụ, nếu một phần tử được thêm vào DOM, các kiểu được định nghĩa là cho trạng thái "đến" (to). Module này cung cấp at-rule @starting-style, cho phép định nghĩa các kiểu bắt đầu cho những trường hợp như vậy. Module này cũng định nghĩa cách các giá trị thuộc tính rời rạc (discrete) nên được chuyển tiếp, chẳng hạn như chuyển tiếp thuộc tính display được animate rời rạc từ giá trị none sang giá trị hiển thị.

Tham khảo

Thuộc tính

At-rule

Giao diện

Hướng dẫn

Sử dụng CSS transitions

Hướng dẫn từng bước giải thích cách tạo transitions bằng CSS. Bài viết này mô tả từng thuộc tính CSS liên quan và giải thích cách chúng tương tác với nhau.

Animate display

Chuyển tiếp đến và từ giá trị none của thuộc tính display được animate rời rạc.

Chuyển tiếp một popoverchuyển tiếp một <dialog>

Ví dụ về chuyển tiếp từ @starting-style đến các kiểu pseudo-class :popover-open:open cuối cùng.

Khái niệm liên quan

Đặc tả kỹ thuật

Specification
CSS Transitions Module Level 1
CSS Transitions Module Level 2

Xem thêm