HIỆU ỨNG CHUYỂN ĐỘNG (TRANSITION) TRONG CSS

08-01-2019 21:01

Để có thể có một front-end website hoàn chỉnh cần có sự phối hợp của 3 ngôn ngữ lập trình chính: HTML. CSS và Javascript. Trong đó Javascript đóng vai trò xây dựng hiệu ứng cho website. Tuy nhiên trong CSS3, chúng ta có thể sử dụng các tính năng tạo hiệu ứng đơn giản cho website mà không cần phải sử dụng đến Javascript. Cùng ITPlus Academy tìm hiểu tính năng này nhé.

Hiệu ứng transition trong CSS

CSS3 đã có một sự cải tiến mới là tạo hiệu ứng (transition) mà các nhà phát triển giao diện người dùng đã tìm ra khả năng thiết kế các tương tác này trong html và css mà không cần JavaScript.

Để transition được diễn ra, một yếu tố để thay đổi được trạng thái, cần có những sự tác động vào nó. VD: hover, focus, active and target Transition có 4 thuộc tính liên quan đến quá trình chuyển đổi: transition-property, transition-duration, transition-timing-function, và transition-delay. Nhưng không phải tất cả các thuộc tính này là bắt buộc, nhưng 3 thuộc tính đầu tiên là được sử dụng phổ biến nhất.

Đây là một ví dụ thay đổi background của một khối khi ta :hover vào nó

Để được hỗ trợ tốt nhất trên các trình duyệt, ta thêm các tiền tố sau:

Các thuộc tính chuyển dổi trong CSS

Điều quan trọng cần lưu ý là không phải tất cả các thuộc tính đều có thể chuyển đổi được. chỉ các thuộc tính có điểm giữa chừng có thể xác định được. Màu sắc, kích thước, phông chữ có thể chuyển đổi từ giá trị này sang giá trị khác. dưới đây là một số transition phổ biến:

Thời gian chuyển đổi transition

Trong quá trình chuyển đổi transition có thời gian diễn ra bằng cách sử dụng transition-duration được xác định bằng các giá trị thời gian giây(s), mili giây (ms). Khi transition nhiều thuộc tính, bạn có thể đặt nhiều thời lượng cho mỗi thuộc tính và được cách nhau bằng dấu phẩy, VD: