Thuộc tính Transitions trong CSS | Lập Trình Từ Đầu

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ụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

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ụ:


See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

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ụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

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ụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

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