css3探索之帧动画
帧动画也叫@keyframes动画，被广泛应用于H5页面
本文适合有html和css基础的同学，粗体部分请重点记忆。
@keyframes帧动画的兼容性：
IE9以上浏览器，以及主流浏览器 火狐 谷歌 Opera 都是支持的。
为了让IE浏览器直接按最高版本进行渲染，我们一般直接加上这段代码：<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">，说实话这段真的很难记忆。
帧动画的书写步骤分为两步走：
1.@keyframes{} 定义动画
2.animation: 调用动画并定义属性
下面我们来看如何定义动画
定义动画： @keyframes 动画名称｛
0%｛background:red; left:0; top:0;｝
50%{background:green; left:10px; top:0;}
100%{background:blue; left:30px; top:0;}
｝
// 或者from{}
to{}
这样，我们就定义了一个名字叫“动画名称”的动画，它的内容是3个关键帧，分别是红色背景，然后变绿色背景，右移10像素，然后变蓝色背景，继续右移20像素。如果只有2个关键帧的话，直接用frome{} to{}，当然也可以根据情况添加更多的关键帧，用百分比表示。
调用动画： 用到animation属性
下面我们看一下，它在css中的样子
div{
animation-name: 动画名称;
animation-duration: 5s; //一个周期的时间
animation-timing-function: linear; //速度曲线
animation-delay: 2s; //延迟
animation-iteration-count: infinite; //播放次数 默认是1
animation-direction: alternate; //下一周期，逆向播放，默认是 normal，不逆向。
animation-play-state: running; //动画是否正在运行，默认是直接运 行running，若是paused，则不动。
}
//多浏览器支持需加上前缀
看到这里，有人会说什么乱起八糟的，根本就不好记住嘛！
我们将其进行缩写来看
div{
animation：动画名称 5s linear 2s infinite alternate;
-moz-animation: 动画名称 5s linear 2s infinite alternate; //Firefox 火狐浏览器
-webkit-animation: 动画名称 5s linear 2s infinite alternate; //Safari Chrome 苹果浏览器 谷歌浏览器 安卓浏览器
-o-naimation: 动画名称 5s linear 2s infinite alternate; //Opera Opera浏览器
}
粗体部分就是上面的浓缩版，我顺便加上了多浏览器前缀，我们来分析一下这段浓缩的代码：
我用汉语标注一下是这样的
animation：动画名称 5s linear 2s infinite alternate;
animation：动画名称 周期 匀速 延迟 循环 倒着放;
看到这里的人，以后都会成为敲代码的高手，一个图片没有，居然还能看到这里，耐心超乎常人，前途不可限量啊！
下面我要上图了：
说了这么多，也掌握了用法，但是不知道该如何运用，下面我上几个用到帧动画的实例，日后举一反三，就靠你自己了。
以前仿作的支付宝首页
这个小箭头，就是用帧动画做的，效果：不断的变大缩小，让人看着有点击的欲望。
我们定义动画的名字叫 pulse
分为三个关键帧，初始缩放比利是1.1倍，50%的时候缩小到0.8倍，100%的时候回到正常比利1。
调用：
它的默认值是normal，另外这些属性除了前2个外，后面的是可以颠倒先后位置的。
运用到帧动画的例子还有很多，比如下面这个轮播中流动的液体效果：
有2种思路：其一是定义2个动画，分别用2张超宽的液体png图，在不同的关键帧中改变background-position中x轴坐标的位置，来实现背景在固定的div中移动的效果，父div盒子设置固定宽度，绝对定位，盒子不动，背景动。
第二种思路，父div盒子设置超级宽的宽度，背景不用特别大，设置repeat-x就行，然后把关键帧设置父div盒子的left值，让div盒子不停的移动。
