CSS3步驟動畫 - 不改變圖像，只是移動圖像

我想使用CSS3步驟動畫從一個圖像更改爲另一個使用簡單的2圖像精靈表。我似乎無法獲得第二張圖片來加載第一張圖片。我看了其他的例子，我真的不知道我哪裏錯了。所以，如果任何人都可以幫助它，將不勝感激。謝謝。CSS3步驟動畫 - 不改變圖像，只是移動圖像

CODEPEN DEMO

<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; 
}

來源

2013-10-17 2ne

你的背景定位是不正確的。嘗試：

@keyframes newquestion-beak { 
    from { background-position: -100px 0; } 
    to { background-position: 100px 0; } 
}

Running demo on CodePen

來源

2013-10-17 10:06:55 SKeurentjes

我不明白這是如何工作的？因爲如果我把背景位置：100px 0;在CSS它不顯示任何東西 – 2ne

http://codepen.io/2ne/pen/xfIol這是我的完整版本使用巨大的精靈表，你可以看到我需要了解這是如何工作的，以便能夠使用動畫 – 2ne

使用「步驟（2）」中的動畫似乎只能像半路移動。使用Chrome將我的「到」背景位置翻倍。

Demo with change.

來源

2013-10-17 10:10:46 goosefraba19

相同的評論如下 - 如果我把background-position：-200px 0;在CSS中它沒有顯示任何東西。任何想法這些步驟動畫是怎麼回事？ – 2ne

你是什麼意思，它不顯示任何東西？根本沒有動畫？ – goosefraba19

對不起，我的意思是，如果我沒有設置動畫，只需設置相同的值的背景位置，那麼它什麼都不顯示。它看起來像步驟動畫，你必須把背景位置放在最後一個想要使用的位置之後。 – 2ne

CSS3步驟動畫 - 不改變圖像，只是移動圖像

回答

相關問題