过渡 transition
transition-property/duration/delay/timing-function、贝塞尔曲线
过渡 transition
transition 让属性变化平滑发生——而不是瞬间切换。
学完本章你将： 掌握 transition-property/duration/delay/timing-function。
基本语法
css
.box {
width: 100px;
background: blue;
transition: width 0.3s, background 0.5s;
/* 属性 时长，多个用逗号分隔 */
}
.box:hover {
width: 200px;
background: red;
}四个子属性
css
.transition {
/* 哪些属性过渡 */
transition-property: width, background;
/* 过渡时长 */
transition-duration: 0.3s;
/* 延迟 */
transition-delay: 0.1s;
/* 速度曲线 */
transition-timing-function: ease;
/* ease / linear / ease-in / ease-out / ease-in-out */
/* cubic-bezier(0.25, 0.1, 0.25, 1) 自定义贝塞尔 */
}
/* 简写 */
.box { transition: all 0.3s ease 0.1s; }实用场景
css
/* 所有元素默认过渡 */
* { transition: all 0.2s ease; }
/* 按钮 */
.btn {
background: #4CAF50;
transition: background 0.3s, transform 0.2s;
}
.btn:hover {
background: #45a049;
transform: scale(1.05);
}⚠️ 不是所有属性都能过渡——只有数值型的才行（颜色、尺寸、位置等）。