Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có thuộc tính transition giúp bạn tạo ra các hiệu ứng chuyển động của một đối tượng tron website dễ dàng mà không cần phải dùng thêm Javascript.
Thuộc tính transition xác định một quá trình chuyển đổi khi có một hành động tác động vào nó. Ví dụ như hover, click, …
Cấu trúc
| tag { transition: giá trị; -moz-transition: giá trị; -webkit-transition: giá trị; -o-transition: giá trị; } |
Trong đó:
-moz-transition hỗ trợ cho firefox.
-webkit-transition hỗ trợ cho Google Chrome và Safari.
-o-transition hỗ trợ cho Opera.
Transition có các giá trị như sau:
Transitional Properties
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| transition-property | none | transition-property: none; | Hiệu ứng của quá trình chuyển đổi sẽ không được hiển thị. |
| width height |
transition-property: height; | Xác định hiệu ứng của quá trình chuyển đổi cho các thuộc tính css, mỗi thuộc tính cách nhau bằng dấu phẩy. | |
| all | transition-property: all; | Xác định hiệu ứng của quá trình chuyển đổi cho tất cả thuộc tính. |
Đ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.
Transition duration
transition-duration |
Thời gian | transition-duration: 10s; | Quá trình chuyển đổi mất bao nhiêu thời gian. |
Transition timing
timing-function |
ease | transition-timing-function: ease; | Xác định một hiệu ứng của quá trình chuyển đổi với một sự khởi đầu chậm, sau đó nhanh chóng, sau đó kết thúc chậm. |
| ease-in | transition-timing-function: ease-in; | Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu chậm chạp. | |
| ease-out | transition-timing-function: ease-out; | Xác định một hiệu ứng của quá trình chuyển đổi với một kết thúc chậm. | |
| ease-in-out | transition-timing-function: ease-in-out; | Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu và kết thúc chậm. | |
| linear | transition-timing-function: linear; | Xác định một hiệu ứng của quá trình chuyển đổi với cùng một tốc độ từ đầu đến cuối. | |
| cubic-bezier(n,n,n,n) | transition-timing-function: cubic-bezier(0,1,0.35,0); | Xác định giá trị cho hiệu ứng của quá trình chuyển đổi theo từng giai đoạn, giá trị xác định chỉ có thể từ 0 tới 1. |
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.
Transition delay
| transition-delay | thời gian | transition-delay: 3s; | Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu. |
Ngoài việc khai báo thuộc tính transition, timing, duration, bạn cũng có thể đặt delay với thuộc tính transition-delay với giá trị thời gian, giây hoặc mili giây. Như với tất cả các thuộc tính transition khác, delay nhiều lần, các giá trị cũng được cách nhau bằng dấu phẩy.
Transition
| ransition | [property] [duration] [timing-function] [delay] | transition: height 2s ease 3s; | Đây là thuộc tính tập hợp các thuộc tính trên. |
Nguồn: Tổng hợp
