- 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:
Đã đăng vào thg 1 2, 2019 5:09 SA 2 phút đọc 2 phút đọc
TRANSITION
Một sự cải tiến mới trong css3
là khả năng viết các hiệu ứng [transition]. 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 htmk và css mà không cần Javasscript.
Với các CSS3 transitions bạn có thể thay đổi diện mạo hành vi của một phần tử bất cứ khi nào có sự tác động vào nó. Ví dụ như hover, click, ...
Như đã đề cập ở trên, để transition được diễn ra , một yếu tố để thây đổ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.
Dưới đâ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:
Transitional Properties
Đ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ố transitions phổ biến:
Transition timing
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:
Transition delay
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.
All rights reserved