transition

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

基本语法

transition: property duration timing-function delay;

参数	说明	是否必填	默认值
property	要过渡的属性名	❌	all
duration	过渡持续时间	✅	0s
timing-function	过渡速率曲线（缓动函数）	❌	ease
delay	延迟执行时间	❌	0s

all

所有“可以过渡的 CSS 属性”，只要发生变化，都会应用过渡效果

transition: all 0.3s;

常用速率函数

函数名	效果	说明
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;
}