Chuyển đổi CSS
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 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:
-
transition
-
transition-delay
-
transition-duration
-
transition-property
-
transition-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 cách 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 hiển thị 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 là 2 giây:
Ví 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 (chiều rộng) được chỉ định thay đổi giá trị.
Bây giờ, 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>:
Lưu ý rằng khi con trỏ di chuột ra khỏi phần tử, nó sẽ dần dần thay đổi về kiểu dáng ban đầu.
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 là 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 chức năng chuyển đổi thời gian có thể có các giá trị sau:
-
ease
- chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định) -
linear
- chỉ định hiệu ứng chuyển tiếp có cùng tốc độ từ đầu đến cuối -
ease-in
- chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm -
ease-out
- chỉ định hiệu ứng chuyển tiếp với kết thúc chậm -
ease-in-out
- chỉ định hiệu ứng chuyển tiếp với phần bắt đầu và kết thúc chậm -
cubic-bezier(n,n,n,n)
- cho phép bạn xác định các giá trị của riêng mình trong hàm cub-bezier
Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:
Ví 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;}
Hãy tự mình thử »Trì hoãn hiệu ứng chuyển tiếp
Thuộc tính transition-delay
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:
Chuyển tiếp + Chuyển đổi
Ví dụ sau thêm hiệu ứng chuyển tiếp vào phép biến đổi:
Thêm ví dụ về chuyển tiếp
Các thuộc tính chuyển tiếp CSS có thể được chỉ định từng cái một, như thế này:
Ví dụ
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Hãy tự mình thử » hoặc bằng cách sử dụng thuộc tính tốc ký transition
:
Thuộc tính chuyển tiếp 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 |