目前想做一个通过雪碧图做成的GIF动画。
实现功能：

• 长条雪碧图实现GIF（主要能实现GIF就行，多图的话第一次要多次请求各个图的资源，会有闪烁而且耗资源）

• 窗口自适应（雪碧图的窗口）

• 宽度始终使用%，非定宽

• 高度父容器随子容器变化

• 子容器的高度随图片宽度变化而变化

基本上就是利用修改background-position的数值，对背景图片展示的位置进行修改。
自适应的方式利用了img图片对父容器撑起高宽的方式实现的。
然后利用cover属性进行的背景图片缩放。

因为搞前端真的只有一个月多，大神轻喷。。

现阶段遇到一个问题：
在窗口变动之后（也就是imgp），雪碧图的高宽也要变动。cover实现的。但是出现一个问题，无法获取雪碧图变化后的宽度，无法使用px？使用%的话，其真实的效果还需要引入margin将自身变化的数值（怎么搞？不能动态计算吧，每个step的数值怎么计算）（参考链接： position1 position2）
用%的方法是可以，但是出现了抖动。感觉是由于自适应之后产生的误差引起的。貌似没办法解决啊。难道说是需求有问题还是这个实现方法不好？

所以，怎么实现我的需求？有懂的大神给个方案么？

代码如下：