- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính transition
Định nghĩa và sử dụng
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ị; }
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:
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 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. |
HTML viết:
transition
Hiển thị trình duyệt khi chưa có CSS:
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:
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- transition
transition là gì?
0 giúp cho việc chuyển đổi từ trạng thái này sang trạng thái khác được mượt mà hơn.transition
Ứng dụng của
0 rất lớn, như việc sử dụng hiệu ứng cho các button khi hover, các box item sản phẩm, hay cả việc viết các chuyển động ...transition
Cấu trúc cơ bản
tag {
transition: property time;
}
property | width height color opacity ... height color opacity ... | Là thuộc tính của CSS |
time | 0.3s | Là thời gian của việc chuyển trạng thái |
Cách sử dụng
HTML viết:
Hover me!
CSS viết - khi chưa sử dụng transition
0:
p { background-color: #ffcccc; height: 50px; width: 100px; }
Hiển thị trình duyệt:
Bây giờ ta sẽ làm vài ví dụ về việc sử dụng
0 nhé:transition
TRANSITION VỚI CHIỀU CAO
p { background-color: #ffcccc; height: 50px; transition: height 0.4s; width: 100px; } p:hover { height: 50px; }
Hiển thị trình duyệt:
Di chuyển chuột vào "Hover me!" ta sẽ thấy box được thay đổi chiều cao một cách từ từ.
TRANSITION VỚI CHIỀU RỘNG
p { background-color: #ffcccc; height: 50px; transition: width 0.4s; width: 100px; } p:hover { width: 250px; }
Hiển thị trình duyệt:
Di chuyển chuột vào "Hover me!" ta sẽ thấy chiều rộng box sẽ được thay đổi.
TRANSITION VỚI BACKGROUND
p { background-color: #ffcccc; height: 50px; transition: background-color 0.4s; width: 100px; } p:hover { background-color: #ffffcc; }
Hiển thị trình duyệt:
Di chuyển chuột vào "Hover me!" ta sẽ thấy
4 của box sẽ được thay đổi.transition
TRANSITION VỚI TẤT CẢ CÁC GIÁ TRỊ
p { background-color: #ffcccc; height: 50px; transition: all 0.4s; width: 100px; } p:hover { background-color: #ffffcc; height: 100px; width: 250px; }
Hiển thị trình duyệt:
Di chuyển chuột vào "Hover me!" ta sẽ thấy background, chiều rộng, chiều cao của box sẽ được thay đổi.
Đó là một trong những ví dụ cơ bản nhất, giúp bạn hiểu cách sử dụng
0 như thế nào, với kiến thức nhỏ trên, cộng với sự sáng tạo của riêng bạn, bạn hoàn toàn có thể sáng tạo nhiều hiệu ứng chuyển động khác nhau, tất nhiêntransition
0 còn rất nhiều tính năng khác, bạn có thể tìm hiểu thêm tại tham khảo transitiontransition