我想使用CSS3步驟動畫從一個圖像更改爲另一個使用簡單的2圖像精靈表。我似乎無法獲得第二張圖片來加載第一張圖片。我看了其他的例子,我真的不知道我哪裏錯了。所以,如果任何人都可以幫助它,將不勝感激。謝謝。CSS3步驟動畫 - 不改變圖像,只是移動圖像
<div class="character">
<div class="beak"></div>
</div>
@keyframes newquestion-beak {
from { background-position: 0px 0; }
to { background-position: -100px 0; }
}
.character > div {
background-repeat: no-repeat;
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
}
.character .beak {
background-image: url(http://s22.postimg.org/6mb37v5sh/compiled_beaks.png);
animation: newquestion-beak .8s steps(2) infinite;
}
我不明白這是如何工作的?因爲如果我把背景位置:100px 0;在CSS它不顯示任何東西 – 2ne
http://codepen.io/2ne/pen/xfIol這是我的完整版本使用巨大的精靈表,你可以看到我需要了解這是如何工作的,以便能夠使用動畫 – 2ne