深入浅出CSS动画

前言

转眼都2016年已经过了三个多月，我始终在前端学习的路上无法努力前行，也许是因为自知前路坎坷，望而却步，少了最初接触前端时候的热情，也许真的是性格使然，两天打鱼三天晒网，使我落后于他人却不自知，可能现在的我正在一条艰难的路上行走，这是每个人必经的道路，身后的路途我也披荆斩棘一路走来，我身边多有半途而废回头的人，可是我心有不甘，也许再付出一些，再努力一些，就能冲破桎梏，也许走过这个最艰难的时光，就能顺利踏入真正的热土，即使一无所获，我也不能在这里放弃。
我今后的每一步，都要脚踏实地。

什么是帧动画

我们知道所有的动画都是用单个的画面组合而成，当我们将每一页的画面连贯起来，就会变成一段小小的动画，小的时候我们在课本上画上一页一页的小人，然后将他快速的翻动就能看见一个动着的小人，每一页就表示一帧，现代电影一般是每秒24帧，这就代表一秒的动画，需要24张照片，动画相对较少，每秒大概在12-16帧左右。
而相对于网页上的动画，只要满足浏览者感觉这个画面在动即可，一方面节省编程的繁琐，另一方面优化浏览器的性能，通常一秒钟的动画使用8个画面即可。

如何使用帧动画

如果我们要使用帧动画的话，就要学习CSS中的animation属性

其实animation是一个简写值，它包括了animation的八个子属性值

属性值	作用	值
animation-name	动画名称	规定绑定keyframes的名称
time	时间	数值ms(毫秒数)、s(秒数)
animation-timing-function	规定运动曲线	ease、linear、ease-in、ease-out、step-start、step-end、step([,[start end]?)、cubic-bezier(x1,y1,x2,y2)
animation-iteration-count	动画播放次数	默认为1、infinite为无限制
animation-direction	规定动画是否反方向运动	normal、reverse、alternate、alternate-reverse)
animation-play-state	定义动画是否运行或暂停	running、paused、normal
animation-fill-mode	定义动画播放时间外的状态	none、forwards、backwards、both

我们现在将每一个属性拆开了，揉碎了，仔细的进行解释。

属性值的作用

animation-name：动画名称，它规定了这个动画的名称，这个名称需要绑定在keyframes上面，keyframes是什么意思呢，他其实就像我们翻动画书的那只手，他确定我们在那张图片上进行操作。
一般的css语法就是，当确定animation-name后，绑定在keyframes上面

animation-name:man-run;
@keyframes man-run{...}//例子而已

time:time确定两个时间，前面一个是规定完成这个动画所需要的时间，全称叫animation-duration，第二个叫动画延迟开始播放的时间，全称叫animation-delay
animation-timeing-function:规定动画的运动曲线，分别有9个值

• ease：动画缓慢开始，接着加速，最后减慢，默认值
• linear：动画从头到尾的速度是相同的；
• ease-in:以低速开始；
• ease-out：以低速结束；
• ease-in-out：动画以低速开始和结束

然后比较复杂的是steps(n,[start | end ]?)，这个属于阶梯函数，这个函数可以把动画平均划分为基本相等的，这个n是个自然整数，意思是将一个动画平均分成n等分，知道平均的走完这个动画，这样跟linear区分开，因为linear是吧动画作为一个整体，中间没有断点，而steps是把动画分段平均执行。

• step-start：等同于steps(1,start)，动画分成一步，动画执行时为开始左侧端点的部分为开始。

• step-end：等同于steps(1,end)，动画分成一步，动画执行时以结尾端点为开始，默认值为end。

animation-iteration-count:动画播放次数，默认为1，infinite为无限制播放，如果设定无限制播放，那么动画就会永远播放下去。

animation-direction，规定动画是否反方向运动。normal表示正常转动播放，为默认值，reverse表示反向转动，alternate一开始正常转动，播放完一次后在反向转动，加入设置animation-iteration-count为1的话，则该值无效，alternate-reverse表示一开始为反向转动，播放一次之后按照回归正常转动，交替转动，设置count为1，该值无效。

animation-play-state：定义动画是否运行或者暂停，这是后来新增的属性，有两个属性值，running和paused。默认为normal，动画正常播放。加入为paused，那么动画暂停。加入一个动画一开始为运动，那么设置paused则会暂停动画，如果动画暂停，使用running则会运行动画。

animation-fill-mode:定义动画播放时间外的状态，就是在动画播放后的状态；none表示不改变默认的行为，forwards则是停在动画最后的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态。

下面是我做的一个小的demo，运用到的是这个图片

.bear{
		width:6.25em;
		height:3.125em;
		left:-5%;
        bottom:20px;
		position: absolute;
		margin-left: -3.125em;
		z-index: 999;
		background: url(小熊.png) 0 0 no-repeat;
		background-size: 50em 100%;
	}

先设定好图片，样式。

.bear.running{
animation:bear-run 0.8s steps(1) 0s infinite normal none;
}

再设定好动画

@keyframes bear-run{
             0%{
                 background-position: 0 0;
            }
           12.5%{
                 background-position: -100px 0;
             }
             25%{
                background-position: -200px 0 ;
           }
           37.5%{
               background-position: -300px 0 ;
            }
             50%{
                 background-position: -400px 0 ;
            }
            62.5%{
                background-position: -500px 0 ;
             }
            75%{
                 background-position: -600px 0 ;
             }
            87.5%{
                 background-position: -700px 0 ;
             }
            100%{
                 background-position: 0 0;
             }
  	}

最后就是帧数的操作了

怎么样，你学会了css中动画的使用了吗？？？

奔跑的小熊