为什么CSS动画不与背景大小100％的工作

我工作的CSS动画与步骤...我的问题是：为什么CSS动画不与背景大小100％的工作

时步（）==（帧长度-1）一切都是流体exept，我不能看到最后一帧
时步（）==帧长我仍然不能看到最后一帧和动画是凌乱...

我正在寻找一种方法来使用背景100％（或至少一个exp为什么它不工作lanation），因为我可以与帧型动物数量精灵使用它，只是使用步骤（）来调整实际的精灵..

演示：

#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>

来源

2017-07-27 Sébastien Garcia-Roméo

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

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>

来源

2017-07-27 11:57:04 Dhaarani

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

您需要更改初始位置是background-position:-33% center;代替background-position: 0 center;

在这种情况下，四个步骤会像这样：

第一步： background-position: -33% center;这将显示img4
第二步：background-position: 0% center;它将显示IMG1
步骤3：background-position: 33% center;它将显示IMG2
步骤4：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>

来源

2017-07-27 12:38:18

为什么CSS动画不与背景大小100％的工作

回答

相关问题