過渡(手寫)

CSS

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition-property: height, width;
  transition-duration: 1s, 500ms;
  transition-timing-function: linear;
  transition-delay: 0s, 1s;
}
div:hover {
  height: 200px;
  width: 200px;
}

HTML

<div></div>
  • transition-property :指定轉換效果的 CSS 屬性。在這種情況下,div 會在懸停時水平和垂直展開。
  • transition-duration :指定轉換完成所需的時間長度。在上面的示例中,高度和寬度轉換將分別為 1 秒和 500 毫秒。
  • transition-timing-function :指定過渡效果的速度曲線。甲線性值表示的過渡將具有相同的速度從開始到結束。
  • transition-delay :指定轉換效果開始前等待所需的時間。在這種情況下,高度將立即開始轉換,而寬度將等待 1 秒。