javascript - 关于雪碧图制作Gif的时候自适应窗口大小的方法？
目前想做一个通过雪碧图做成的GIF动画。
实现功能：
长条雪碧图实现GIF（主要能实现GIF就行，多图的话第一次要多次请求各个图的资源，会有闪烁而且耗资源）
窗口自适应（雪碧图的窗口）
宽度始终使用%，非定宽
高度父容器随子容器变化
子容器的高度随图片宽度变化而变化
基本上就是利用修改background-position的数值，对背景图片展示的位置进行修改。
自适应的方式利用了img图片对父容器撑起高宽的方式实现的。
然后利用cover属性进行的背景图片缩放。
因为搞前端真的只有一个月多，大神轻喷。。
现阶段遇到一个问题：
在窗口变动之后（也就是imgp），雪碧图的高宽也要变动。cover实现的。但是出现一个问题，无法获取雪碧图变化后的宽度，无法使用px？使用%的话，其真实的效果还需要引入margin将自身变化的数值（怎么搞？不能动态计算吧，每个step的数值怎么计算）（参考链接： position1 position2）
用%的方法是可以，但是出现了抖动。感觉是由于自适应之后产生的误差引起的。貌似没办法解决啊。难道说是需求有问题还是这个实现方法不好？
所以，怎么实现我的需求？有懂的大神给个方案么？
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>p</title>
<style type="text/css">
.container{
width: 100%;
height: 100vh;
position: relative;
background-color: green;
opacity: 0.5;
margin: 0;
padding: 0;
}
.imgp{
width: 50%;
border: 1px solid;
margin:0 auto;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
animation: temp 1s steps(10,start) infinite;
}
.hiddenImg{
width: 100%;
height: auto;
visibility: hidden;
}
@keyframes temp {
0% {
background-position:0% 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<p class="container">
<p class="imgp">
<img class="hiddenImg" src="container.png"></img>
</p>
</p>
</body>
</html>