Thuộc tính transition-property

Thuộc tính transition-property thiết lập thuộc tính sẽ được tạo hiệu ứng bằng chuyển tiếp mượt mà transition. Giá trị cần truyền vào là tên của thuộc tính CSS sẽ được tạo hiệu ứng. Nếu đặt giá trị là all (giá trị mặc định) - tất cả các thuộc tính sẽ được tạo hiệu ứng cùng lúc.

Cú pháp

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

Ví dụ

Di chuột vào khối - nó sẽ thay đổi chiều rộng một cách mượt mà, vì transition-property có giá trị là width:

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

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

Результат:

Ví dụ . Giá trị all

Trong ví dụ này, transition-property có giá trị là all - do đó tất cả các thuộc tính được viết cho trạng thái hover sẽ thay đổi mượt mà (trong trường hợp của chúng ta là width và height). Tất cả các thay đổi sẽ diễn ra trong cùng một khoảng thời gian, được thiết lập trong transition-duration:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Xem thêm