Chuyển đổi CSS
Chuyển tiếp CSS cho phép bạn thay đổi giá trị thuộc tính một cách trơn tru, trong một thời lượng nhất định.
Chuột qua phần tử bên dưới để xem hiệu ứng chuyển đổi CSS:
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Hỗ trợ trình duyệt cho chuyển tiếp
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
chuyển đổi | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Transition-Delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Thời gian chuyển tiếp | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
chuyển tiếp-tài sản | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Chuyển đổi thời gian chức năng | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Làm thế nào để sử dụng chuyển đổi CSS?
Để tạo hiệu ứng chuyển tiếp, bạn phải chỉ định hai điều:
- thuộc tính CSS bạn muốn thêm hiệu ứng vào
- thời lượng của hiệu ứng
Lưu ý: Nếu phần thời lượng không được chỉ định, quá trình chuyển đổi sẽ không có hiệu lực, vì giá trị mặc định là 0. If the duration part is not specified, the transition will have no effect, because the default value is 0.
Ví dụ sau đây hiển thị phần tử đỏ 100px * 100px. Phần tử cũng đã chỉ định hiệu ứng chuyển tiếp cho thuộc tính chiều rộng, với thời lượng 2 giây:
Thí dụ
div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Hiệu ứng chuyển tiếp sẽ bắt đầu khi thuộc tính CSS được chỉ định [chiều rộng] thay đổi giá trị.
Bây giờ, chúng ta hãy chỉ định một giá trị mới cho thuộc tính chiều rộng khi người dùng thay đổi phần tử:
Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.
Thay đổi một số giá trị thuộc tính
Ví dụ sau đây thêm hiệu ứng chuyển tiếp cho cả thuộc tính chiều rộng và chiều cao, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao:
Chỉ định đường cong tốc độ của quá trình chuyển đổi
Thuộc tính transition-timing-function
chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp.
Thuộc tính chuyển đổi thời gian chuyển đổi có thể có các giá trị sau:
ease
- Chỉ định hiệu ứng chuyển tiếp với khởi động chậm, sau đó nhanh, sau đó kết thúc chậm [đây là mặc định]linear
- Chỉ định hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuốiease-in
- Chỉ định hiệu ứng chuyển tiếp với khởi đầu chậmease-out
- Chỉ định hiệu ứng chuyển tiếp với kết thúc chậmtransition-delay
0 - Chỉ định hiệu ứng chuyển tiếp với khởi động chậm và kết thúctransition-delay
1 - Cho phép bạn xác định các giá trị của riêng mình trong hàm hình khối
Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:
Thí dụ
div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Hiệu ứng chuyển tiếp sẽ bắt đầu khi thuộc tính CSS được chỉ định [chiều rộng] thay đổi giá trị.
Bây giờ, chúng ta hãy chỉ định một giá trị mới cho thuộc tính chiều rộng khi người dùng thay đổi phần tử:
Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.
Thay đổi một số giá trị thuộc tính
Ví dụ sau đây thêm hiệu ứng chuyển tiếp cho cả thuộc tính chiều rộng và chiều cao, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao:
Chỉ định đường cong tốc độ của quá trình chuyển đổi
Thuộc tính transition-timing-function
chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp.
Thuộc tính chuyển đổi thời gian chuyển đổi có thể có các giá trị sau:
Thí dụ
div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Hiệu ứng chuyển tiếp sẽ bắt đầu khi thuộc tính CSS được chỉ định [chiều rộng] thay đổi giá trị.
Bây giờ, chúng ta hãy chỉ định một giá trị mới cho thuộc tính chiều rộng khi người dùng thay đổi phần tử:
Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.
Thay đổi một số giá trị thuộc tính
chuyển đổi | Transition-Delay |
Transition-Delay | Thời gian chuyển tiếp |
Thời gian chuyển tiếp | chuyển tiếp-tài sản |
chuyển tiếp-tài sản | Chuyển đổi thời gian chức năng |
Chuyển đổi thời gian chức năng | Làm thế nào để sử dụng chuyển đổi CSS? |