CSS中transition属性详解

CSS transition 属性详解

1. 属性定义

transition 是 CSS3 提供的简写属性，用于在元素样式属性发生变化时，自动添加平滑的过渡动画效果，而不是瞬间改变。

基本语法：

transition: property duration timing-function delay;

2. 子属性详解

transition 简写属性包含以下四个子属性：

属性	描述	可选值	默认值
transition-property	指定要应用过渡效果的 CSS 属性名称	none, all, 具体属性名	all
transition-duration	定义过渡效果持续的时长	时间值（s 或 ms）	0
transition-timing-function	定义过渡效果的速度曲线	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()	ease
transition-delay	定义过渡效果开始前的延迟时间	时间值（s 或 ms）	0

3. 速度曲线详解

transition-timing-function 定义动画的速度变化：

值	描述	适用场景
ease	慢速开始，然后加速，再慢速结束（默认值）	大多数自然动画效果
linear	从开始到结束速度相同	机械、匀速运动
ease-in	以慢速开始，逐渐加速	物体加速离开效果
ease-out	以快速开始，逐渐减速	物体减速到达效果
ease-in-out	以慢速开始和结束	平滑的往返运动
cubic-bezier(n,n,n,n)	使用贝塞尔曲线自定义速度曲线	需要特殊动画效果时

4. 使用方法

4.1 基本使用

.element {
width: 100px;
transition: width 2s ease-in-out;
}
.element:hover {
width: 200px;
}

4.2 多属性过渡

css

.element {

transition: width 2s ease, height 1s linear, opacity 0.5s ease-in;

}

4.3 使用简写属性

css

/* 分开设置 /
.element {
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
/ 简写方式 */

.element {

transition: width 2s ease-in 1s;

}

5. 适用场景与属性

5.1 可应用过渡的常见属性

• 尺寸类 ：width, height, padding, margin
• 颜色类 ：color, background-color, border-color
• 变换类 ：transform（2D/3D变换）
• 显示类 ：opacity, visibility

5.2 与 transform 结合使用

.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: scale(1.1) rotate(5deg);
}

6. 注意事项

1. 必须设置 duration ：如果 transition-duration 为 0，过渡不会产生任何动画效果
2. 性能考虑 ：优先使用 transform 和 opacity 属性，它们可以通过GPU加速
3. 浏览器兼容性：现代浏览器支持良好，如需支持旧版浏览器可能需要添加前缀
4. 触发条件 ：过渡需要状态变化来触发，如 :hover, :focus 或 JavaScript 修改样式

7. 实际应用示例

.button {
background-color: blue;
padding: 10px 20px;
transition: all 0.3s ease;
}
.button:hover {
background-color: darkblue;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

通过合理使用 transition 属性，可以显著提升用户界面的交互体验，创建更加生动和专业的动画效果。