过渡

transition 是 CSS 过渡属性，用于在 状态变化（如 hover、active、focus 等）时平滑地过渡属性值。

transition

transition: property duration timing-function delay;

参数	说明	是否必填	示例
property	要过渡的属性名	✅	width、background-color、all
duration	过渡持续时间	✅	0.3s、500ms
timing-function	过渡速率曲线（缓动函数）	❌	ease、linear、ease-in、cubic-bezier(...)
delay	延迟执行时间	❌	0.2s

常用速率函数（timing-function）：

函数名	效果	说明
linear	匀速	从头到尾速度不变
ease	缓出	默认值，先快后慢
ease-in	缓入	慢进快出
ease-out	缓出	快进慢出
ease-in-out	缓入缓出	慢–快–慢
cubic-bezier(x1, y1, x2, y2)	自定义曲线	更精细控制

示例：

• transition 写在触发伪元素之前：导航效果

li{
  background-color:white;
  transition: all 0.5s 
}

li:hover{
  background-color:red;
}

• transition 写在触发伪元素后

li{
  background-color:white;
}

li:hover{
  background-color:red;
  transition: all 0.5s;
}