1.要产生过渡效果的css属性
transition-property:属性名称;如(width)
注意:多个属性使用逗号隔开,如果嫌麻烦,可以直接写all,表示所有属性,另外过渡对于display没有用。
2.要完成过渡的效果的时长
transition-duration:数字+单位;
如(5s)
注意:s为秒,ms为毫秒,两者的比例为1s=1000ms。
3.速度方式
transition-timing-function:速度方式;
属性如下:
linear(表示匀速)
ease (逐渐减速 - 一开始比较快)
ease-in (逐渐加速)
ease-out (逐渐减速 - 一开始没有ease快)
ease-in-out (先加速后减速)
cubic-bezier(0.735, 1.650, 0.315, -0.600);
(贝塞尔曲线)
steps(步骤数);(分步骤)
注意:附贝赛尔曲线生成网站
效果大概如下图
![过渡](https://img.it610.com/image/info9/0446e29584ee4161ba03cf2210a362dd.gif)
文章图片
4.表示延迟多少秒执行过渡效果
transition-delay: 数字s;
5.复合写法
【过渡】transition: 值;
注意:transition的取值:是单一写法的4个值的组合,用空格隔开。第一个秒数表示过渡效果需要使用的时间,第二个秒数表示延迟多长时间后执行。通常情况下,我们在开发当中,只使用复合写法。