CSS Chuyển đổi

CSS Chuyển đổi

CSS transition cho phép bạn thay đổi giá trị thuộc tính một cách mượt mà trong một khoảng thời gian nhất định.

Để xem hiệu ứng chuyển đổi CSS, hãy di chuyển con trỏ chuột lên phần tử này:

CSS

Trong chương này, bạn sẽ học các thuộc tính sau:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Hỗ trợ trình duyệt cho hiệu ứng chuyển đổi

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

thuộc tính Chrome IE Firefox Safari Opera
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 hiệu ứng chuyển đổi CSS?

Để tạo hiệu ứng chuyển đổi, bạn phải rõ ràng hai điều sau:

  • Thuộc tính CSS mà bạn muốn thêm hiệu ứng
  • Thời gian duy trì của hiệu ứng

Lưu ý:Nếu không quy định phần thời gian, hiệu ứng chuyển đổi sẽ không có hiệu quả vì giá trị mặc định là 0.

Ví dụ dưới đây trình bày phần tử <div> màu đỏ với kích thước 100px * 100px. Phần tử <div> cũng đã thiết lập hiệu ứng chuyển đổi cho thuộc tính width, với thời gian duy trì là 2 giây:

ví dụ

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Khi giá trị của thuộc tính CSS (width) được chỉ định thay đổi, hiệu ứng chuyển đổi sẽ bắt đầu.

Hiện tại, để thiết lập một giá trị mới cho thuộc tính width khi con trỏ chuột dừng trên phần tử <div>:

ví dụ

div:hover {
  width: 300px;
}

thử ngay

Xin请注意，khi con trỏ di chuyển ra khỏi phần tử, nó sẽ dần trở về kiểu dáng ban đầu của nó.

Thay đổi giá trị của nhiều thuộc tính

Dưới đây là ví dụ thêm để thêm hiệu ứng transition cho thuộc tính width và height, width là 2 giây, height là 4 giây:

ví dụ

div {
  transition: width 2s, height 4s;
}

thử ngay

Định nghĩa đường cong tốc độ transition

transition-timing-function Thuộc tính quy định đường cong tốc độ của hiệu ứng transition.

Thuộc tính transition-timing-function có thể chấp nhận các giá trị sau:

  • ease - Quy định hiệu ứng transition bắt đầu chậm, sau đó tăng tốc, sau đó kết thúc chậm (mặc định)
  • linear - Quy định hiệu ứng transition có tốc độ từ đầu đến cuối đều
  • ease-in - Quy định hiệu ứng transition bắt đầu chậm hơn
  • ease-out - Quy định hiệu ứng transition kết thúc chậm hơn
  • ease-in-out - Quy định hiệu ứng transition bắt đầu và kết thúc chậm hơn
  • cubic-bezier(n,n,n,n) - Cho phép bạn định nghĩa giá trị của mình trong hàm ba điểm Bezier

Dưới đây là ví dụ về các đường cong tốc độ có thể 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;}

thử ngay

Độ trễ transition

transition-delay Thuộc tính quy định độ trễ của hiệu ứng transition (được tính bằng giây).

Dưới đây là ví dụ có độ trễ 1 giây trước khi bắt đầu:

ví dụ

div {
  transition-delay: 1s;
}

thử ngay

Transition + Chuyển đổi

Dưới đây là ví dụ thêm để thêm hiệu ứng transition cho chuyển đổi:

ví dụ

div {
  transition: width 2s, height 2s, transform 2s;
}

thử ngay

Các ví dụ transition khác

Bạn có thể chỉ định từng thuộc tính transition CSS một cách chi tiết như sau:

ví dụ

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

thử ngay

hoặc sử dụng viết tắt transition Thuộc tính:

ví dụ

div {
  transition: width 2s linear 1s;
}

thử ngay

Thuộc tính transition CSS

Bảng dưới đây liệt kê tất cả các thuộc tính transition CSS:

thuộc tính mô tả
transition Thuộc tính viết tắt, sử dụng để đặt bốn thuộc tính chuyển đổi thành một thuộc tính duy nhất.
transition-delay Định nghĩa độ trễ của hiệu ứng chuyển đổi (bằng giây).
transition-duration Định nghĩa hiệu ứng chuyển đổi phải kéo dài bao lâu hoặc bao nhiêu mili giây.
transition-property Định nghĩa tên thuộc tính CSS mà hiệu ứng chuyển đổi nhắm đến.
transition-timing-function Định nghĩa đường cong tốc độ của hiệu ứng chuyển đổi.