10分钟入门CSS3 Animation _云知道

简介
Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。
兼容性
animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要谨慎使用。

CSS 坐标系
在了解animtion之前，我们有必要先了解css的坐标系，因为很多的animation效果都和元素的坐标密切相关。在css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反) 。

Animations
1. Transforms
transform中文译为“转换”，但我更倾向于称呼它“变形”(大名鼎鼎的变形金刚叫transformer) 。我们可以使用transform function使html元素产生各种各样的变形，比如平移、缩放、旋转、扭曲等，而且不会影响正常的文档流(document flow) 。
(1) Translate
Translate一般译为“翻译”，但在css里面一般用作“平移”，因为translate用于改变html元素的在3d坐标系位置。translate支持在坐标系内任意方向移动(通过任意组合x、y、z方向的向量)，单位可以是长度单位和百分比(百分比是相对于被平移的元素自身尺寸，x轴是相对于width，y轴是相对于height，而在z轴方向由于元素是没有‘厚度’的，所以对于z方向不能用百分比表示)，例如：

注意：

(2) Scale
Scale意为“缩放”，顾名思义，是用于改变元素的大小。例如：

(3) Rotate
Rotate意为“旋转”，支持将元素以x、y、z为轴旋转，旋转正方向为面朝坐标轴正向逆时针方向，可参考上面坐标系示意图。rotate方法接收一个角度作为参数，角度>0 正向旋转，角度<0 负向旋转，例如：

(4) 组合
我们可以将不同的transform方法组合起来使用，如：

组合方法的执行顺序是从右往左，即先执行scale，然后rotate，最后translate，产生的效果是逐次累加的。方法书写的顺序对最后效果有很大的影响，看下面例子，沿y轴平移和放大，顺序不同，产生的结果有明显差别：

如果先translate再scale，平移的距离也将被等比例缩放，而先scale再translate则不会。所以在使用transform需按照 translate -> rotate -> scale 的顺序书写，让scale先执行，以免放大translate的效果，而rotate先translate执行以防止带着平移的距离一起转动。我觉得这是transform目前不方便的地方，因为方法之间相互干扰并不容易理解，书写顺序也不容易记住。在未来有望通过使用独立的css transform属性解决这一问题，因为独立的transform属性对书写顺序没有依赖，方法之间彼此不会干扰。
Transition
Transition翻译为“过渡”，强调的是过程。在css中指在一段时间内，元素从一个状态(对应一个css属性)过渡到另一个状态的动态过程。我们可以决定以何种方式过渡过渡和花费多少时间。