Transitions trong CSS cho phép bạn thay đổi các giá trị thuộc tính của một phần tử một cách trơn tru, trong một khoảng thời gian nhất định bằng các thuộc tính sau:
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
1. Làm thế nào để sử dụng transitions trong 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ụ:
Trong đó:
- Phần tử <div> màu đỏ có kích thước 100px * 100px
- Tôi 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 chuyển ra khỏi phần tử, nó sẽ dần dần thay đổi trở lại kiểu ban đầu
2. Chỉ định tốc độ của quá trình chuyển đổi của phần tử trong CSS
Thuộc tính transition-timing-function xác định tốc độ của hiệu ứng chuyển tiếp của phần tử trong CSS
Thuộc tính transition-timing-function 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 (mặc định)
- linear – chỉ định hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuối
- ease-in – chỉ định hiệu ứng chuyển tiếp với tốc độ ban đầu chậm
- ease-out – chỉ định hiệu ứng chuyển tiếp với tốc độ 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 có tố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 cubic-bezier
Ví dụ:
3. Trì hoãn hiệu ứng chuyển đổi trong CSS
Thuộc tính transition-delay chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp của phần tử
Ví dụ:
4. Kết hợ thuộc tính Transition với thuộc tính Transformation trong CSS
Bạn có thể kết hợp hai thuộc tính này lại với nhau để cho ra những kết quả thú vị
Ví dụ:
5. Các trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
| 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 |
