css3动画在手机端的流畅度比较

我发现即使都是用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属性值以及值的类型，大家可以点这里了解详情。 引用自http://www.w3cplus.com/content/css3-transition

流畅度比较

(下面的比较中，左边永远比右边流畅的，而且比较的双方是它们都能做同一个效果，否则没有对比的意义哦) 这个比较是我做好demo后用肉眼看出来的，而且在ios、pc、mac、android中看，流畅度会有不同，但暂时未发现下列列表中右侧比左侧流畅的情况。

transform:translate()流畅于padding、margin transform:scale()流畅于width、height(其实这两个没法比，因为transform:scale()是直接缩放，会拉伸元素的，但如果用的是一个纯色的div，倒是可以用。)