transform, transition and animation

CSS3发展迅猛，增加了许多新的属性，其中形变与动画令人大开眼界，下面一一介绍之。注：目前CSS3的很多属性都属于实验性阶段，故各个浏览器厂商在实现标准时会加上自己的前缀，目前有webkit, o, ms, moz等几种。

1. 形变（transform）

形变（transform）是指将元素进行位置、旋转、倾斜和matrix等变换。

语法

transform:  \<transform-function> [<transform-function>]* | none

注：通过transform-origin可指定发生形变的原点。其中transfomr-function包括translate, rotate, scale, skew, matrix等

translate

包括三个方向，水平是x轴，向右为正向，垂直是y轴，向下为正向，垂直于铅垂面的是z轴，远离屏幕方向为正向。

向x轴平移指定距离

transform: translateX(tx)       /* see <length> for possible values */

向y轴平移指定距离

transform: translateY(ty)       /* see <length> for possible values */

同时向x, y轴平移

transform: translate(tx[, ty])  /* one or two <length> values */

同时向x, y和z轴平移

transform: translate3d(tx, ty, tz)  /* three values */

scale

变大或缩小指定倍数

沿x轴方向扩大/缩放

transform: scaleX(sx);          /* a unitless <number>, e.g., scaleX(2.7) */

沿y轴方向扩大/缩放

transform: scaleY(sy);          /* a unitless <number>, e.g., scaleY(2.7) */

同时沿x, y轴扩大/缩放

transform: scale(sx[, sy]);     /* one or two unitless <number>s, e.g., scale(2.1,4) */

rotate

沿指定轴旋转指定角度

沿x轴旋转

transform: rotateX(rx);          /* an angle value e.g., rotateX(30deg) */

等价于

transform: rotate3D(1, 0, 0, 30deg);

沿y轴旋转

transform: rotateY(ry);          /* an angle value e.g., rotateY(30deg) */

等价于

transform: rotate3D(0, 1, 0, 30deg);

沿z轴旋转(正数即为顺时针方向)

transform: rotate(angle);       /* an <angle>, e.g., rotate(30deg) */

等价于

transform: rotate3D(0, 0, 1, 30deg);
transform: rotate(30deg);

skew

沿指定轴倾斜注：沿x轴倾斜，元素高度不变，沿y轴倾斜，元素宽度不变。

沿x轴倾斜

transform: skewX(angle)         /* an <angle>, e.g., skewX(-30deg) */

沿y轴倾斜

transform: skewY(angle)         /* an <angle>, e.g., skewY(-30deg) */

同时沿x, y轴倾斜

transform: skew(ax[, ay])       /* one or two <angle>s, e.g., skew(30deg,-10deg) */

matrix

以上几种形变都是出自于matrix，太复杂，暂时没去深入了解，尼玛高等数学终于起作用了不是？！

2. transition

transform描述的是元素的一个状态，而要从一个状态变化到另外一个状态，就要通过transition或者animation来做了，我理解的transition主要用在较简单的动画，animation则可以对动画进行更精细的控制，通过keyframes。

语法

transition: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

3. animation

依据关键帧精细化控制动画的每个过程，包括多长时间完成指定的形变等。

语法

animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

5. 一些个人经验

当有多个元素要协作构成一个动画时，比如两个元素不断翻转，可画出每个元素的时间轴，这样能更清晰的思考，否则infinite型的动画一定会调到你头晕；
可以用这个工具来简单调试一下你的动画效果；
在caniuse网站上查询你所需要用到的属性在各个浏览器的支持情况；

LeoYuan / leoyuan.github.io