过渡效果

Posted 2021-01-13 zengsf

过渡指的是元素的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为单位的数值