CSS Transitions

0
76
  • Thuộc tính css transitions cho phép bạn thay đổi các giá trị thuộc tính một cách mượt mà, trong một khoảng thời gian nhất định.

Các thuộc tính transitions:

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

Cách dùng CSS Transitions.

Để tạo hiệu ứng chuyển tiếp, bạn phải chỉ định hai điều:

  • thuộc tính CSS 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 gian 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:

Cú pháp:

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

Lưu ý:

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

Cú pháp:

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 đây thêm hiệu ứng chuyển tiếp cho cả thuộc tính widthheight, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao:

Cú pháp:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}
div:hover {
  width: 300px;
  height: 300px;
}

Chỉ định đường cong tốc độ của quá trình chuyển đổi.

  • Hàm transition-timing-function có các thuộc tính chỉ định tốc độ đường cong của hiệu ứng.

Ví dụ:

  • 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ối.
  • ease-in – chỉ định hiệu ứng chuyển tiếp với khởi động 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 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 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:

Cú pháp:

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

#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;}

div:hover {
  width: 300px;
}

Hiệu ứng delay

Thuộc tính transition-delay quy định khoảng delay cho các hiệu ứng.

Ví dụ sau có độ trễ 1 giây trước khi bắt đầu:

Code:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

Transition + Transformation.

  • Ví dụ sau đây thêm hiệu ứng transition vào transformation: Phần tử div tăng độ rộng, chiều cao , và quay 180 độ trong vòng 2s.

Cú pháp:

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

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

CSS Transition Properties(Thuộc tính).

Thuộc tínhGiải thích
transition

Thuộc tính viết tắt để đặt bốn thuộc tính chuyển tiếp thành một thuộc tính duy nhất

transition-delay

Chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp

transition-duration

Chỉ định bao nhiêu giây hoặc mili giây để hoàn thành một hiệu ứng chuyển tiếp

transition-propertyChỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho
transition-timing-functionChỉ định đường cong tốc độ của hiệu ứng chuyển tiếp

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây