過渡（手寫）

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 秒。