过渡指的是元素的CSS属性值发生变化时的一种平滑过渡效果
语法:
1.属性:transition
取值:property duration timing-fuction delay
注意:1.属性简写是,四个属性值中,duration是必填项,其他三个属性值可以省略
2.transition属性如果在伪类选择器中设置,元素的过渡效果只发生在第一次属性值变化的过程中,在有的属性值变化都不会添加过渡效果,为了保证页面效果,过渡属性在元素的默认样式中添加
2.过渡详解
1.属性:transition-property
取值: CSS属性名称
作用:指定某一个CSS样式在发生值变化时添加过渡效果
注意:1.多个属性时,使用,号隔开
2.可以省略,所有涉及值改变的属性都会被自动添加过渡效果
3.all 指定所有CSS属性在值变化时产生的属性都会被自动添加自动过渡中
2.属性:transition-duration
取值:以s为单位的数值
作用:指定过渡时长
3.属性:transition-timing-function
作用:指定过渡效果的速度变化曲线
取值: 1. ease :默认值,慢速开始,中间速度变快,慢速结束
2. linear:匀速变化
3. ease-in:慢速开始,匀速结束
4.ease-out:快速开始,慢速结束
5. ease-in-out:慢速开始和结束,中间先加速
4.属性:transition-delay
作用 :延迟几秒之后再发生过渡效果
取值 :s / ms为单位的数值