css3动画属性中的transition属性

1、语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果须要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果什么时候开始。

 

 

 

 

一、color: 经过红、绿、蓝和透明度组件变换（每一个数值处理）如：background-color,border-color,color,outline-color等css属性；

二、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；

三、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；

四、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；

五、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；

六、transform list:详情请参阅：《CSS3 Transform》

七、rectangle:经过x, y, width 和 height（转为数值）变换，如：crop

八、visibility: 离散步骤，在0到1数字范围以内，0表示“隐藏”，1表示彻底“显示”,如：visibility

九、shadow: 做用于color, x, y 和 blur（模糊）属性,如：text-shadow

十、gradient: 经过每次中止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的中止数值以便执行动画,如：background-image

十一、paint server (SVG): 只支持下面的状况：从gradient到gradient以及color到color，而后工做与上面相似

十二、space-separated list of above:若是列表有相同的项目数值，则列表每一项按照上面的规则进行变化，不然无变化

1三、a shorthand property: 若是缩写的全部部分均可以实现动画，则会像全部单个属性变化同样变化

具体什么css属性能够实现transition效果，在W3C官网中列出了全部能够实现transition效果的CSS属性值以及值的类型，你们能够点这里了解详情。这里须要提醒一点是，并非什么属性改变都为触发transition动做效果，好比页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动做效果。

 

2、浏览器兼容性

IE10之后支持

demo：点击按钮的时候，导航会收起。此时宽度发生变化，经过css3的transition属性，给他一个过渡效果。

 

3、代码

左侧栏和内容区都须要设置动画，动画时间要一致，这样不会形成因时间不一致而闪动