在介绍animation之前有必要先来了解一个东西，那就是“keyframes”,我们把他叫做“关键帧”；
在使用transition制作一个简单的transition效果时，包括了初始属性，最终属性以及完成过渡效果 所需的时间、速度曲线、开始时间；但是这些都无法控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，仅仅通过transition就很难实现；此时就需要“关键帧”这个东西，下面我们就来看看"keyframe";
“keyframe”命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”,加上一对花括号“{}”，括号中就是一些不同时间段的样式规则（有点像我们css的 样式写法一样）；一个"@keyframes"中的样式规则是由多个百分比构成的，从“0%”到"100%"之间；
我们可以在这个规则中创建多个百分比，在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状 等；
需要注意的是，我们使用“fromt” “to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"，而"to"相当于"100%"（注意：其中"0%"必须加上百分符号（“%”），如果没有加上的话，这个keyframes将是无效的，因为keyframes的单位只接受百分比值）；
语法举个栗子：
Keyframes定义好了以后，我们需要怎么去调用刚才定义好的动画“myMove”呢？这时就需要给元素定义animation属性；
W3school网站上 animation有八个属性：
还有两个animation-play-state（规定动画正在运行还是暂停）、animation-fill-mode（规定动画在播放之前或之后，其动画效果是否可见）；
接下来给元素定义Animation属性就可以调用刚刚写好的“myMove”动画了；直接上代码：
通过上面两段代码我们就能看到一个橘色的div宽度增加的效果了；
到这里关于animation的基本理论就介绍得差不多了；但是……大家有没有发现，以上产生的动画效果都是渐变过渡型的；这要从animation-timing-function说起，我们知道animation-timing-function 规定动画的速度曲线：
animation-timing-function默认以ease方式过渡，除了ease，以上linear、cubic-bezier之类的过渡函数都会在每个关键帧之间插入补间动画，所以动画效果看起来是连贯性的；但是有些时候效果 不需要补间，而是需要关键帧之间的跳跃，其实timing-function的取值除了上述还有一个steps()函数；这时就应该使用steps过渡方式来实现帧跳跃的效果了；
steps() 函数指定了一个阶跃函数；他有两个参数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end；
steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，这里容易错误地理解成就是keyframes写的变化次数,认为steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分；
|
@-webkit-keyframe name{ 0% { } 25% { } 50% { } 75% { } 100%{ } } |
实际上不是的；要理解第一个参数关键要理解他的针对点，这里需要引入一个核心点：timing-function 是作用于每两个关键帧之间的，而不是整个动画；
这样一来第一个参数就很好理解了，也就是说steps的设置都是针对两个关键帧之间的，而非是整个keyframes；所以第一个参数是设置了每一次step的变化次数，换句话说就是设置了 0-25 之间变化5次，25-50之间 变化5次 ，50-75 之间变化5次，以此类推；
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end ; 通过案例看下 step-start与step-end 的区别:
@-webkit-keyframes circle {
0% {background: red}
50%{background: yellow}
100% {background: blue}
}
step-start: 黄色与蓝色相互切换;
step-end: 红色与黄色相互切换;
2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%;
step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了黄色yellow;
step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red;
/********* ok，整理完了，就酱，吃饭去啦啦啦啦******/
本文帧动画部分内容参考自艾伦大神的《深入理解css 3 Animation帧动画》，原文地址如下：
by Aaron：http://www.cnblogs.com/aaronjs/p/4642015.html