为啥 css 动画不适用于背景大小 100%

Posted 2023-03-05

【中文标题】为啥 css 动画不适用于背景大小 100%

【英文标题】：Why css animation doesn't work with background size 100%为什么 css 动画不适用于背景大小 100%

【发布时间】：2018-01-03 02:02:56

【问题描述】：

我正在使用带有步骤的 css 动画...我的问题是：

当 step() == (frame length -1) 时，除了我看不到最后一帧之外，一切都很流畅

当 step() == 帧长度时，我仍然看不到最后一帧，并且动画很混乱...

我正在寻找一种 100% 使用背景的方法（或者至少解释为什么它不起作用），因为我可以将它与具有不同帧数的精灵一起使用，并且只需使用 step() 来调整到实际的精灵..

演示：

#sprite1, #sprite2, #sprite3 
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;


#sprite1 
  animation: sprite 1s steps(3) infinite;


#sprite2 
  animation: sprite 1s steps(4) infinite;


#sprite3 
  animation: sprite2 1s steps(4) infinite;



@keyframes sprite 
    100%  background-position: right center; 


@keyframes sprite2 
    100%  background-position: 164px center; 

Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>

【参考方案1】：

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

0-100% 来自（与 0% 相同） 到（与 100% 相同）

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

sprit image 4 以 50% 开始，所以我给了。检查下面的示例代码。

#sprite1, #sprite2, #sprite3 
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;


#sprite1 
  animation: sprite 1s steps(3) infinite;


#sprite2 
  animation: sprite3 1s steps(3) infinite;


#sprite3 
  animation: sprite2 1s steps(4) infinite;



@keyframes sprite 
    60%  background-position: right center; 


@keyframes sprite2 
    100%  background-position: 164px center; 

@keyframes sprite3 
    50%  background-position: right center; 

Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>

【讨论】：

谢谢先生，我编辑了我的问题，那么有没有办法可以使用与所有类型的 spriteSheets 兼容的动画关键帧（只需更改 step() 值）？

【参考方案2】：

您需要将初始位置更改为background-position:-33% center;，而不是background-position: 0 center;

在这种情况下，四个步骤将像这样工作：

step1：background-position: -33% center; 将显示 img4

step2：background-position: 0% center; 将显示 img1

step3：background-position: 33% center;which 将显示 img2

第四步：background-position: 66% center;将显示img3

#sprite1 
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') -33% center;

#sprite1 
  animation: sprite 1s steps(4) infinite;


@keyframes sprite 
    100%  background-position: right center; 

<div id="sprite1"></div>

【参考方案3】：

试试这个：

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

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

#container 
  width: 50px;
  height: 72px;
  animation: container 1s linear infinite;


@keyframes container 
  50% 
    width: 72px;
    height: 50px;
  


#sprite 
  width: 100%;
  height: 100%;
  background-color: red;
  background-image: url(http://i.imgur.com/xtk0SCC.png);
  background-position: 0% 0;
  background-size: calc(100% * 10) 100%;
  background-repeat: no-repeat;
  animation: sprite 1s steps(10) infinite;


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

<div id="container">
    <div id="sprite"></div>
</div>