CSS3 过渡
CSS3 过渡功能允许元素从一种样式变为另一种样式时添加平滑的动画效果，而不需要使用 JavaScript 或 Flash。悬停（手机端点击）下面的卡片，查看元素的过渡效果：
过渡效果
CSS3 过渡属性
transition-property属性，用于指定哪些 CSS 属性会有过渡效果。
.example{
transition-property: width; /* 单个属性过渡 */
transition-property: width, height; /* 多个属性过渡 */
transition-property: all; /* 所有属性过渡 */
}实现的效果：
宽度过渡
宽度、高度过渡
宽度、高度、背景色过渡
CSS3 过渡时间
transition-duration属性，用于指定指定过渡效果持续的时间。
.example{
transition-duration: 0.5s; /* 过渡持续0.5秒 */
transition-duration: 1s; /* 过渡持续1秒 */
transition-duration: 2s; /* 过渡持续2秒 */
}实现的效果：
过渡持续时间0.5秒
过渡持续时间1秒
过渡持续时间2秒
CSS3 过渡曲线
transition-timing-function属性，用于定义过渡效果的速度曲线。
.example{
transition-timing-function: ease; /* 默认值，慢-快-慢 */
transition-timing-function: linear; /* 匀速 */
transition-timing-function: ease-in; /* 慢开始 */
transition-timing-function: ease-out; /* 慢结束 */
transition-timing-function: ease-in-out; /* 慢开始和慢结束 */
transition-timing-function: cubic-bezier(n,n,n,n); /* 自定义贝塞尔曲线 */
}实现的效果：
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(0.68, -0.6, 0.32, 1.6)
CSS3 过渡延迟
transition-delay属性，用于定义过渡效果何时开始。
.example{
transition-delay: 0.5s; /* 0.5秒后开始过渡 */
transition-delay: 1s; /* 1秒后开始过渡 */
transition-delay: 2s; /* 2秒后开始过渡 */
}实现的效果：
过渡效果0.5秒开始
过渡效果1秒开始
过渡效果2秒开始
CSS3 过渡属性
下表列出了 CSS3 所有的过渡属性：
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
83
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈