Hướng dẫn transition css examples - ví dụ 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 thời lượng nhất định.

Chuột qua phần tử bên dưới để xem hiệu ứng chuyển đổi 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 chuyển tiếp

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.

Làm thế nào để sử dụng chuyển đổi CSS?

Để 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 lượng 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. If the duration part is not specified, the transition will have no effect, because the default value is 0.

Ví dụ sau đây hiển thị phần tử đỏ 100px * 100px. Phần tử cũng đã chỉ định hiệu ứng chuyển tiếp cho thuộc tính chiều rộng, với thời lượng 2 giây:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
  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 đượ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 chiều rộng khi người dùng thay đổi phần tử:

Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.

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 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 chuyển đổi thời gian chuyển đổi có thể có các giá trị sau:

• ease - Chỉ định hiệu ứng chuyển tiếp với khởi động chậm, sau đó nhanh, sau đó kết thúc chậm (đây là 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 khởi đầu chậm
• ease-out - Chỉ định hiệu ứng chuyển tiếp với kết thúc chậm
• transition-delay0 - Chỉ định hiệu ứng chuyển tiếp với khởi động chậm và kết thúc
• transition-delay1 - Cho phép bạn xác định các giá trị của riêng mình trong hàm hình khối

Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

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 chiều rộng khi người dùng thay đổi phần tử:

Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.

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 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 chuyển đổi thời gian chuyển đổi có thể có các giá trị sau:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

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 chiều rộng khi người dùng thay đổi phần tử:

Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.

Thay đổi một số giá trị thuộc tính