css中过渡transition
定义
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
- transition-property: 过渡属性(默认值为all)
- transition-duration: 过渡持续时间(默认值为0s)
- transiton-timing-function: 过渡函数(默认值为ease函数)
- transition-delay: 过渡延迟时间(默认值为0s)
[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法
transition说明
复合属性。检索或设置对象变换时的过渡。
可以为同一元素的多个属性定义过渡效果
如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：
如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：
对应的脚本特性为transition。
transition实例
CSS transition属性详解-CSS教程
请将鼠标移动到下面的矩形上：
- 背景色过渡
- 背景色过渡
- 背景色过渡
- 背景色过渡
- 背景色过渡
过渡属性
transition-property
值: none | all | [,]*初始值: all应用于: 所有元素继承性: 无
过渡持续时间
该属性的单位是秒s或毫秒ms
transition-duration
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性不能为负值
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
过渡延迟时间
该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms
transition-delay
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
过渡时间函数
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果
transition-timing-function
初始值: ease
应用于: 所有元素
继承性: 无
取值
过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数
steps函数
steps步进函数将过渡时间划分成大小相等的时间时隔来运行
steps步进函数为
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！