基础概念
CSS样式可分为两种，一种值接近无限的集合(color,width)，一种值只有几种(display)，可以进行计算的样式，产生了动画效果。
1. 动画的第一步是获得元素的精确样式值。
2. 若要做平移，传入结束位置、距离、时长、fps。
tips：fps设置多少合适？
除了人的眼睛，还要考虑到显示器的显示速度与浏览器的渲染速度。据国外统计，根据人所能感知到的变化间隔，25毫秒为最佳数值。
缓动公式
缓动公式来源于数学上的三角函数、二次项方程、高阶方程式，有了公式就可以控制移动速度。
一般情况下，只会用默认的linear或easeIn。现在所有的缓动公式，除了linear外都以ease开头命名，添加三种后缀，In代表加速、Out代表减速、InOut代表先加速后减速，于是有easeIn、easeOut、easeInOut之分。这种命名表示没有介入高阶函数与三角函数，linear表示匀速。
CSS3 transition
transition是CSS入侵行为层的主要行为。
包含4个属性，样式名、持续时间、缓动公式、延迟多久才触发。
transition-property
指定属性执行transition效果，主要有以下几个值：none（无）、all（所有属性 默认值）、indent（元素属性名）。
如果指定属性，可以选择的类型如下：
1、与颜色相关的属性，如background-color,border-color,color,outline-color。
2、与盒子模型、字体大小、间距、行高有关样式。如width、top、margin、line-height等。
3、透明度 opacity。
4、变形相关 即transform。
5、阴影 text-shadow box-shadow。
6、线性渐变与径向渐变。
transition-duration
动画持续时间，单位可以是s，也可以是ms。
transition-timing-function
缓动公式。有6个可能的值
1、ease：逐渐变慢（默认值）
2、linear：匀速
3、ease-in：加速
4、ease-out：减速
5、ease-in-out：先加速后减速
6、cubic-bezier：允许自定义一个时间曲线。（x1,y1,x2,y2），四个值对应贝塞尔曲线的4个点，值需定义在[0,1]之间。
transition-delay
延迟执行时间，可选单位s或ms。
该属性缺点是不可控，无法暂停，一般框架不会用这个来实现动画引擎。
CSS3 animation
吸收了Flash的关键帧理念，并克服了transition的一些缺陷。
animation是一个复合样式，可以细分为8个更细的样式，情况与background-*关系相仿。
1、animation-name
制约关键帧样式的名字，可以同时对应多个关键帧样式规则名，以‘，’号分开。
2、animation-duraiton
动画持续时间，单位为s或ms。
3、animation-timing-function
缓动公式。
4、animation-delay
动画延迟多久才开始，不计入duration。
5、animation-iteration-count
动画播放次数，值可以为正整数或infinite，默认只执行一次。
6、animation-direction
动画执行的方向，有四个值：normal、alternate、reverse、alternate-reverse。
normal：指每次都从第一帧开始。
alternate：count大于1有效，动画从0%-100%,100%-0%循环。
reverse：有兼容问题，与normal相反，从最后一帧开始。
alternate-reverse：有兼容问题，与alternate相反。
7、animation-fill-mode
指动画跑完一圈，是保持动画前的状态还是此时的状态。
8、animation-play-state
用于暂停或继续此动画。
除了最后两个，前六个可以写在一块。