爲什麼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％的工作

回答

相關問題