⌘K

Thuộc tính transition-duration

Thuộc tính transition-duration thiết lập thời gian thực hiện chuyển tiếp mượt mà transition.

Cú pháp

cssbộ chọn {
  transition-duration: thời gian tính bằng s hoặc ms;
}

Giá trị

Giá trị Mô tả
s Chỉ định thời gian tính bằng giây (ví dụ 3s). Có thể chỉ định giá trị thập phân, ví dụ, 0.5s - nửa giây.
ms Chỉ định thời gian tính bằng mili giây (ví dụ 3ms). Một giây là 1000 mili giây.

Giá trị mặc định: 0s.

Ví dụ

Di chuột vào khối - nó sẽ thay đổi chiều rộng của mình một cách mượt mà trong 2 giây. 

html<div id="elem"></div>
css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Xem thêm

  • thuộc tính transition-property,
    thiết lập tên thuộc tính cho chuyển tiếp mượt mà
  • thuộc tính transition-delay,
    thiết lập độ trễ trước khi chuyển tiếp mượt mà
  • thuộc tính transition-timing-function,
    thiết lập hàm thời gian cho chuyển tiếp mượt mà
  • thuộc tính transition,
    là cách viết tắt cho chuyển tiếp mượt mà
  • thuộc tính animation,
    dùng để tạo hoạt ảnh
BackPseudo-element first-lineNextThuộc tính transition-delay