Định nghĩa và sử dụng transition
Thuộc tính transition xác định một quá trình chuyển đổi khi có một hành động.
Cấu trúc
tag {
transition: giá trị;
-moz-transition: giá trị;
-webkit-transition: giá trị;
-o-transition: giá trị;
}- -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:
| 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. | |
| transition-duration | Thời gian | transition-duration: 10s; | Quá trình chuyển đổi mất bao nhiêu thời gian. |
| transition-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. | |
| 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. |
| transition | [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. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>transition</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
transition
CSS viết:
p { background: #cc0000; transition: height 2s; -moz-transition: height 2s; -webkit-transition: height 2s; -o-transition: height 2s; height: 23px; width: 120px; } p:hover { height: 100px; }
Hiển thị trình duyệt khi có CSS:
transition
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính transition:
