Css3之高级-6 Css过渡(概述、过度子属性)_html/css_WEB-ITnose
过度概述
- 使得 CSS 的属性值在一段时间内平滑的过渡
- 比如，鼠标悬停后，背景色在 1s 之内，由白色平滑的过渡为红色
- 指定 4 个要素
- 指定过渡属性，如 background、color等
- 指定过渡所需时间
- 指定过渡函数，即过渡的速度、方式等
- 指定过渡延迟时间，表示开始执行的时间
- 触发过渡
- 通过用户的行为触发，如点击、悬浮等
过渡示例
触发过渡
- 过渡由用户的行为(如点击、悬浮等)触发
- 由元素的状态变化触发
- :hover、:active、:focus 等
- 由JavaScript 代码触发
二、过度子属性
过渡属性 transition-property
- transition-property 属性规定应用过渡效果的 CSS 属性的名称
- 当指定的 CSS 属性改变时，过渡效果将开始
- 语法
- transition-property: none | all | property;
- 可以设置过渡的属性
- 颜色属性
- 取值为数值的属性
- 转换属性
- 渐变属性
- visibility属性
- 阴影属性
过渡时间 transition-duration
- transition-duration 属性规定完成过渡效果需要花费的时间
- 以秒或毫秒计
- 语法
- transition-duration: s | ms;
- 默认值是0，意味着不会有效果
- 必须设置 transition-duration 属性，否则时长为0，就不会产生过渡效果
过渡函数 transition-timing-function
- transition-timing-function 属性规定过渡效果的速度曲线
- 取值为预定义函数或者贝塞尔曲线
- 语法
- transition-duration: function;
- 预定义函数
- ease: 默认值，慢速开始，快速变快，然后慢速结束
- linear: 以相同速度开始至结束
- ease-in:以慢速开始，加速效果
- ease-out:以慢速结束，减速效果
- ease-in-out:以慢速开始和结束，先加速再减速
过渡延迟 transition-delay
- transition-delay 属性规定过渡效果何时开始
- 即，当改变元素属性后多长时间开始执行过渡效果
- 以秒或毫秒计
- 语法
- transition-delay: s | ms;
简写属性 transition
- transition 属性是一个简写属性，用于设置四个过渡属性
- 语法
- transition: property duration timing-function delay;
多个过渡效果
- 为过渡子属性设置多个值，多个值之间用逗号隔开
- 为 transition 属性设置多个值，多个值之间用逗号隔开
总结：本章内容主要介绍了 Css过渡(概述、过度子属性)