CSS3 Animation 简单总结

CSS3 变形(Transformation)

/* 该属性下所有的书写规则都需写这三个前缀*/
-webkit-transform/-moz-transform/-o-transform

rotate

/* 元素逆时针旋转90度 */
rotate(-90deg);

Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

scale

/* 宽和高都会被放大双倍 */
scale(2);
/* 宽会是双倍，而高度保持不变 */
scale(2, 1);
/* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */
scale(-2, 1);

scale(缩放)同时采用宽和高两个值，这些值可以是正数、负数和小数。正数放大倍数，负数反转，小数缩小倍数。支持小数点。
IE不支持该属性。

translate

/* 元素向左移动10像素并向下移动20像素 */
translate(10px, 20px);

translate(移动)在原有布局定位的基础上移动，不影响其他元素布局。IE不支持该属性。

skew

/* 元素x轴向上倾斜30度，y轴向左倾斜10度 */
skew(30deg, -10deg);

skew(倾斜)在原有布局定位的基础上移动，不影响其他元素布局。IE不支持该属性。
根据倾斜角度的不同，元素可能会被拉长也可能会被缩小。

上述css3动画都可以链式书写eg:

translate(10, 25) rotate(90deg) scale(2, 1);

使用transform-origin（-moz-transform-origin/-webkit-transform-origin/-o-transform-origin）可以指定transform变形的起点。eg:

/*以元素左上角的点为基准*/
transform-origin: 0 0;
/*以元素右下角的点为基准*/
transform-origin:100% 100%;
/*以元素左上角的点为基准*/
transform-origin:top left;

CSS3 转换(transition)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

/*一下transition都需要添加这些前缀*/
-webkit-transition-property/-moz-transition-property/-o-transition-property

transition-property

/*指定元素background-color的样式变化时使用转换动画*/
transition-property:background-color;

指定转换的CSS属性名称

transition-duration

/*指定元素转换时间需要2s*/
transition-duration:2s;

定义转换花费的时间（从旧属性换到新属性花费的时间）

transition-timing-function

/*元素转换时的动画效果为ease-in*/
transition-timing-function：ease-in;

过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out。

transition-delay

/*元素转换时延迟2s*/
transition-delay：2s;

转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

CSS3 动画(animation)

CSS3 动画可以将之前的转换（transition）以帧的形式“动”起来。

/* 该属性下所有的书写规则都需写这三个前缀*/
-webkit-animation/-moz-animation/-o-animation

animation-name

动画的名称。必须，以后者keyframes结合使用。

animation-duration

定义动画播放一次需要的时间。默认为0，其实是必须的否则没有效果。

animation-timing-function

定义动画播放的方式，参数linear(线性常用)/ease (默认动画函数)/ease-in/ease-out/ease-in-out/cubic-bezier(x1, y1, x2, y2)/step-start。
详细可自行找资料。

animation-delay

定义动画开始的时间，默认0。

animation-iteration-count

定义循环的次数，infinite即为无限次。默认是1。

animation-direction

动画播放的方向，normal（默认）/alternate(第偶数次向前播放，第奇数次向反方向播放)。

定义为元素animation样式后，需要定义动画keyframes。eg:

/*动画名为abc的运动帧，同样需要加前缀eg：@-moz-keyframes*/
@keyframes abc{
0   {-moz-transform:rotate(0deg);}
25% {-moz-transform:rotate(90deg);}
50% {-moz-transform:rotate(180deg);}
75% {-moz-transform:rotate(270deg);}
100%{-moz-transform:rotate(360deg);}
}