过渡（手写）

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