定格动画
用你的鼠标摸他，他就不可能不动！！
这就是定格动画，只播放关键帧。就像以前的老电影一样，只有一张张底片，然后灯光打在底片上，移动底片，动画的感觉就会出来。
别问我排版为什么这么丑
其中用到的关键词是steps()和精灵
比如：
element{
background: url() no-repeat; //the-source-of-picture
animation: spirit-animation 4s steps(9);
}
@keyframes{
from{
background-position: ;//the-start-of-picture
}
to{
background-position: ;//the-end-of-picture
}
}
这个动画会在4秒种播放第一个关键帧和后面的9个关键帧。
下面说一下关键帧。当你在玩LOL(league of legends)的时候，你电脑显卡配置又脱离了年代，你可能会抱怨说，他妈的在放幻灯片。这一张张的幻灯片就是关键帧了。当一定的时间内数量够大的时候，你就感觉不出是在放幻灯片(人眼中光停留的时间是xx秒，当下一个光在上一束停留时进入眼中，你就不会感觉到卡顿)。
我们平时用的animation默认是补间动画。
那问题来了，什么又是补间动画呢。这就得抱怨下取名词的专家了，一大堆简写的名词，完全抠不动。
补间动画，英文tween animation、shape animation，上一个画面平滑过渡到下一个画面，在其间我可以截任意时刻的画面。关键帧就办不到了，他只有设定的那么多画面。
那么精灵呢？
一个对象一组动作的集合。
that`s all.
