Thuộc tính transition

Thuộc tính transition là một dạng viết tắt cho các chuyển tiếp mượt mà, cho phép thiết lập đồng thời transition-duration, transition-property, transition-timing-function và transition-delay.

Cú pháp

cssbộ chọn {
  transition: giá trị;
}

Thứ tự của các giá trị không quan trọng, tuy nhiên thời gian thực hiện (transition-duration) phải đứng trước thời gian trễ (transition-delay).

Giá trị

Xem các thuộc tính tương ứng. Giá trị mặc định: all 0s ease 0s.

Giá trị none hủy bỏ tất cả các chuyển tiếp (chúng sẽ diễn ra ngay lập tức).

Ví dụ

Di chuột vào khối - trong 3 giây sẽ không có gì xảy ra (có thiết lập độ trễ 3s), sau đó nó sẽ thay đổi chiều rộng một cách mượt mà trong 2 giây. Nếu sau đó di chuột ra - thì một lần nữa trong 3 giây không có gì xảy ra, sau đó chiều rộng sẽ giảm mượt mà về giá trị ban đầu:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Xem thêm