为什么css动画没有'；背景尺寸为100%时不工作

我正在使用css动画的步骤…我的问题是：

• 当step（）==（帧长度-1）时，除了看不到最后一帧外，所有内容都是流体

• 当step（）==帧长度时，我仍然看不到最后一帧，动画很混乱

我正在寻找一种100%使用背景的方法（或者至少解释为什么它不起作用），因为我可以将它用于不同帧数的精灵，只需使用步骤（）调整到实际的精灵

演示：

#精灵1、#精灵2、#精灵3{
高度：41px；
宽度：41px；
背景：url（'https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png'）0中心；
}
#精灵1{
动画：精灵1步（3）无限；
}
#精灵2{
动画：精灵1步（4）无限；
}
#精灵3{
动画：精灵2 1的步骤（4）无限；
}
@关键帧精灵{
100%{背景位置：右中心；}
}
@关键帧sprite2{
100%{背景位置：164px中心；}
}

Case1:

案例2：
它应该是什么：

必需。动画持续时间的百分比。 法律价值：

0-100% 从（与0%相同） 至（与100%相同）

注意：在一个动画中可以有多个关键帧选择器

sprit图像4一开始为50%，所以我给出了。检查下面的示例代码

#精灵1、#精灵2、#精灵3{
高度：41px；
宽度：41px；
背景：url（'https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png'）0中心；
}
#精灵1{
动画：精灵1步（3）无限；
}
#精灵2{
动画：sprite3 1s步骤（3）无限；
}
#精灵3{
动画：精灵2 1的步骤（4）无限；
}
@关键帧精灵{
60%{背景位置：右中心；}
}
@关键帧sprite2{
100%{背景位置：164px中心；}
}
@关键帧sprite3{
50%{背景位置：右中；}
}

Case1:

案例2：
它应该是什么：

必需。动画持续时间的百分比。 法律价值：

0-100% 从（与0%相同） 至（与100%相同）

注意：在一个动画中可以有多个关键帧选择器

sprit图像4一开始为50%，所以我给出了。检查下面的示例代码

#精灵1、#精灵2、#精灵3{
高度：41px；
宽度：41px；
背景：url（'https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png'）0中心；
}
#精灵1{
动画：精灵1步（3）无限；
}
#精灵2{
动画：sprite3 1s步骤（3）无限；
}
#精灵3{
动画：精灵2 1的步骤（4）无限；
}
@关键帧精灵{
60%{背景位置：右中心；}
}
@关键帧sprite2{
100%{背景位置：164px中心；}
}
@关键帧sprite3{
50%{背景位置：右中；}
}

Case1:

案例2：
它应该是什么：

您需要将初始位置更改为

背景位置：-33%中心而不是
背景位置：0中心

在这种情况下，四个步骤的工作原理如下：


第1步：
背景位置：-33%居中将显示img4

第二步：
背景位置：0%中心将显示img1

第三步：
背景位置：33%居中将显示img2

第四步：
背景位置：66%居中哪个将显示img3



#sprite1{
高度：41px；
宽度：41px；
背景：url（'https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png）-33%的中心；
}
#精灵1{
动画：精灵1步（4）无限；
}
@关键帧精灵{
100%{背景位置：右中心；}
}
您需要将初始位置更改为
背景位置：-33%中心而不是
背景位置：0中心

在这种情况下，四个步骤的工作原理如下：


第1步：
背景位置：-33%居中将显示img4

第二步：
背景位置：0%中心将显示img1

第三步：
背景位置：33%居中将显示img2

第四步：
背景位置：66%居中哪个将显示img3



#sprite1{
高度：41px；
宽度：41px；
背景：url（'https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png）-33%的中心；
}
#精灵1{
动画：精灵1步（4）无限；
}
@关键帧精灵{
100%{背景位置：右中心；}
}
试试这个：

10=帧/步数；
对于Edge，您必须计算百分比

@keyframes sprite{
  100%{
    background-position: calc(100% / (10 - 1) * 10) 0;
    background-position: 111.111% 0;/* Edge/IE */
  }
}


#容器{
宽度：50px；
高度：72px；
动画：容器1s线性无限；
}
@关键帧容器{
50% {
宽度：72px；
高度：50px；
}
}
#雪碧{
宽度：100%；
身高：100%；
背景色：红色；
背景图片：url(http://i.imgur.com/xtk0SCC.png);
背景位置：0%0；
背景大小：calc（100%*10）100%；
背景重复：无重复；
动画：精灵1步（10步）无限；
}
@关键帧精灵{
100% {
背景位置：calc（100%/（10-1）*10）0；
背景位置：111.111%0；/*边缘/IE*/
}
}

试试这个：

10=帧/步数；
对于Edge，您必须计算百分比

@keyframes sprite{
  100%{
    background-position: calc(100% / (10 - 1) * 10) 0;
    background-position: 111.111% 0;/* Edge/IE */
  }
}


#容器{
宽度：50px；
高度：72px；
动画：容器1s线性无限；
}
@关键帧容器{
50% {
宽度：72px；
高度：50px；
}
}
#雪碧{
宽度：100%；
身高：100%；
背景色：红色；
背景图片：url(http://i.imgur.com/xtk0SCC.png);
背景位置：0%0；
背景大小：calc（100%*10）100%；
背景重复：无重复；
动画：精灵1步（10步）无限；
}
@关键帧精灵{
100% {
背景位置：calc（100%/（10-1）*10）0；
背景位置：111.111%0；/*边缘/IE*/
}
}

T