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(步骤数);(分步骤)
留神:附贝赛尔曲线生成网站
成果大略如下图
4.示意提早多少秒执行过渡成果
transition-delay: 数字s;
5.复合写法
transition: 值;
留神:transition的取值:是繁多写法的4个值的组合,用空格隔开。第一个秒数示意过渡成果须要应用的工夫,第二个秒数示意提早多长时间后执行。通常状况下,咱们在开发当中,只应用复合写法。