之前的transform 可以实现转换,但是一下子就放大缩小视觉上不太好看,要想渐变该如何呢?可以使用transition
transition主要包含四个属性值:
transition: property duration timing-function delay;
执行变换的属性:transition-property;
变换延续的时间:transition- duration;
在延续时间段,变换的速率变化:transition-timing-function;
变换延迟时间:transition- delay;
其中~
transition-property 可取值:
none :transition马上停止执行
all:任何属性变化都执行
其他常见的值:
1、color: 跟颜色有关系的,如:background-color,border-color,color;
2、length:跟数字有关系的,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,margin;
3、transforms属性;
transition-timing-function 可取值:
ease:逐渐变慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:加速然后减速