Chuyển đổi CSS
Chuyển đổi CSS
Chuyển tiếp CSS cho phép bạn thay đổi các giá trị thuộc tính một cách trơn tru, trong một khoảng thời gian nhất định.
Di chuột qua phần tử bên dưới để xem hiệu ứng chuyển tiếp CSS:
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Hỗ trợ trình duyệt cho quá trình chuyển đổi
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.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Làm thế nào để sử dụng chuyển tiếp CSS?
Để tạo hiệu ứng chuyển tiếp, bạn phải chỉ định hai điều:
- thuộc tính CSS mà bạn muốn thêm hiệu ứng vào
- thời gian 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.
Ví dụ sau đây cho thấy phần tử <div> màu đỏ 100px * 100px. Phần tử <div> cũng đã chỉ định hiệu ứng chuyển tiếp cho thuộc tính width, với thời lượng 2 giây:
Thí dụ
div
{
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 width khi người dùng di chuột qua phần tử <div>:
Thí dụ
div:hover
{
width: 300px;
}
Lưu ý rằng khi con trỏ di chuyển ra khỏi phần tử, nó sẽ dần dần thay đổi trở lại kiểu ban đầu.
Thay đổi một số giá trị thuộc tính
Ví dụ sau thêm hiệu ứng chuyển tiếp cho cả thuộc tính width và height, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao:
Thí dụ
div
{
transition: width 2s, height 4s;
}
Chỉ định đường cong tốc độ của quá trình chuyển đổi
Thuộc transition-timing-functiontính chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp.
Thuộc tính chức năng thời gian chuyển tiếp có thể có các giá trị sau:
ease- chỉ định hiệu ứng chuyển tiếp với bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)linear- chỉ định một 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 động chậmease-out- chỉ định hiệu ứng chuyển tiếp với kết thúc chậmease-in-out- chỉ định hiệu ứng chuyển tiếp với bắt đầu và kết thúc chậmcubic-bezier(n,n,n,n)- cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba
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ụ
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
Trì hoãn Hiệu ứng Chuyển đổi
Thuộc transition-delaytính chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp.
Ví dụ sau có độ trễ 1 giây trước khi bắt đầu:
Thí dụ
div {
transition-delay: 1s;
}
Chuyển tiếp + Chuyển đổi
Ví dụ sau đây thêm hiệu ứng chuyển tiếp vào chuyển đổi:
Thí dụ
div {
transition:
width 2s, height 2s, transform 2s;
}
Các ví dụ về chuyển đổi khác
Các thuộc tính chuyển tiếp CSS có thể được chỉ định từng thuộc tính, như sau:
Thí dụ
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
hoặc bằng cách sử dụng thuộc tính viết tắt transition:
Thí dụ
div
{
transition: width 2s linear 1s;
}
Thuộc tính chuyển đổi CSS
Bảng sau liệt kê tất cả các thuộc tính chuyển tiếp CSS:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |