简介
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方向不能用百分比表示），例如：
transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者简写
transform: translate3d(100px, 50%, 2em);注意：
translate是xy平面内的2维平移，
translate3d是xyz空间内的三维平移；
translate也可以单独书写，如
translate: 50% 105px 5rem;，但是该特性尚在实验阶段，很多浏览器不支持，所以现阶段还是配合
transform使用。详情参考MDN translate。(2) Scale
Scale意为“缩放”，顾名思义，是用于改变元素的大小。例如：
transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者简写
transform: scale3d(2, 0.5, 1);
scale方法接收任意数字（正负整数、小数、0）作为参数，该参数为缩放系数，系数>1 效果为放大，0<系数<1 效果为缩小，系数=0 元素尺寸变为无限小而不可见，系数<0 效果为 >0 时的镜像（具体效果可自己实验）。
