所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是’动’的了。
本文主要来说一说第4点和第5点。
图片帧动画
当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果：
可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。 gif图的动效是没有办法暂停的 。这个时候，可以考虑采用图片帧动画。
图片帧动画可以看做是：把gif图的原理在前端用代码实现了一遍。
上面个那个动效，(假设)可以分成100帧，即100张图片，然后用代码控制100张图片依次显示。并且，可以随时在中途暂停。
为了节省http请求，把100张图片合成一张雪碧图，然后用background-position去控制显示哪一张图。推荐一个很不错的图片生成工具： GKA
我把100张图片生成了一个竖直的雪碧图。
在代码里，只需要更新DOM元素的 background-position 即可实现动画。
首先第一个点需要注意： background-position 设置的是 背景图片相对于DOM元素 的起始位置。
假设DOM元素和图片宽高都是 100 * 200
— css
#wrapper {
width: 100px;
height: 200px;
background-image: url('雪碧图.png');
background-size: 100% 10000%; // 有100张图， 100*100
background-repeat: no-repeat;
}— js
var domEl = document.querySelector('#wrapper');
var n; // n：显示雪碧图中第几张图片，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意这里是负值我们只需要用js控制n的值就行，就可以很容易实现 随时执行、暂停动效 。
上面的例子中，dom元素宽高是固定的，如果不固定、想要自适应的话，需要根据图片宽高比，通过 padding-top 来设置dom元素的宽高比。这个时候，在 background-position 中，也无法使用具体的数值了，需要使用百分比。这里有一个需要注意的地方：
background-position 百分比取值时，很自然的以为是直接用背景图片宽高乘以百分比即可得到最终偏移量，但其实不是的。计算公式如下：
x偏移量 = (元素宽度—背景图片的宽度)*x百分比
y偏移量 = (元素高度—背景图片的高度)*y百分比
