标签：
我以前始终都把他搞反，或者是混淆。现在可以稍微小结下。
Transition:CSS3中处理动画的一个样式；只涉及动画起始和终止两个状态。如果涉及到一个动画的各个时间或者状态，那就必须要用到的另外一个样式：
Animate。
Transition有四个过渡属性：
transition-property /*指定动画执行的样式变化*/ transition-duration /*动画需要执行的时间*/ transition-timing-function /*平滑过渡的函数：*/ transition-delay /*延迟多长时间开始动画*/
需要关注的就是transition-property和transition-timing-function。
transition-property指定样式变化，如果涉及到元素的旋转、形变、缩小/放大就需要用到Transform属性：
transform:scale(sx,sy);
transform:rotate(a);
transform:skew(ax,ay);
transform:matrix(a,b,c,d,e,f)
其中martix比较复杂，它可以包含旋转、形变、缩小/放大三者，其实transform的原理是计算机图形学中的2D矩阵变换。
参考：http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html。
transition-timing-function需要用到贝塞尔曲线，首先需要知道几个简单常量：linear ease ease-in ease-out ease-in-out。
进一步精化就需要知道什么是贝塞尔曲线。可以参考：
http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3%E5%8A%A8%E7%94%BB-svg-canvas/
good luck!
标签：
原文地址：http://www.cnblogs.com/liuyinlei/p/4859067.html
