即使都是用css3的transition做动画，有的属性在动画播放时却会不流畅，出现定格动画的效果，这里做个比较。

transition支持的属性类型

首先说一下transition支持的属性类型（是类型哦，具体属性还是自己去看这里）。

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

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:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化

a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化

具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。

流畅度比较

(下面的比较中，左边永远比右边流畅的，而且比较的双方是它们都能做同一个效果，否则没有对比的意义哦)
transform:translate()流畅于padding、margin
transform:scale()流畅于width、height(其实这两个没法比，因为transform:scale()是直接缩放，会拉伸元素的，但如果用的是一个纯色的div，倒是可以用。)

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！