CSS3：transition过渡效果

之前的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：加速然后减速