CSS3中transition属性值及含义
CSS3 的 transition 属性用于定义元素在不同状态之间切换时的过渡效果。它可以平滑地改变 CSS 属性的值，而不是瞬间变化。transition 是一个简写属性，包含以下四个子属性：
- transition-property
指定需要应用过渡效果的 CSS 属性。
值：
- 属性名：如
width、height、opacity等。 all：所有属性都应用过渡效果（默认）。
示例：
transition-property: width;
- transition-duration
指定过渡效果的持续时间。
值：
- 时间值：如
1s（1 秒）、500ms（500 毫秒）。 - 默认值：
0s（无过渡效果）。
示例：
transition-duration: 0.5s;
- transition-timing-function
指定过渡效果的时间曲线，即变化的速度模式。
值：
- 预定义值：
ease：慢快慢（默认）。linear：匀速。ease-in：慢到快。ease-out：快到慢。ease-in-out：慢快慢。
- 贝塞尔曲线：如
cubic-bezier(0.42, 0, 0.58, 1)。 steps()：分步过渡，如steps(4, end)。
示例：
transition-timing-function: ease-in-out;
- transition-delay
指定过渡效果的延迟时间。
值：
- 时间值：如
1s（1 秒）、500ms（500 毫秒）。 - 默认值：
0s（无延迟）。
示例：
transition-delay: 0.2s;
简写语法
transition 属性可以简写为：
transition: [property] [duration] [timing-function] [delay];
示例：
transition: width 0.5s ease-in-out 0.2s;
多属性过渡
可以为多个属性设置不同的过渡效果，用逗号分隔。
示例：
transition:
width 0.5s ease-in-out,
height 0.3s linear,
opacity 0.2s ease-in 0.1s;
完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: width 0.5s ease-in-out, height 0.3s linear;
}
.box:hover {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
总结
| 属性 | 含义 | 示例值 |
|---|---|---|
transition-property | 指定过渡属性 | width, all |
transition-duration | 指定过渡持续时间 | 0.5s, 500ms |
transition-timing-function | 指定过渡速度曲线 | ease, linear, cubic-bezier(0.42, 0, 0.58, 1) |
transition-delay | 指定过渡延迟时间 | 0.2s, 200ms |
通过灵活使用 transition，可以为网页元素添加平滑的动画效果，提升用户体验。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
