如何從一個帶創建一個階梯式動畫？

我使用只有css關鍵幀的動畫元素背景，使用一個條 - 單個圖像中的一組圖像塊。但它不能正常工作，因爲我不希望轉換爲線性，但在步驟：如何從一個帶創建一個階梯式動畫？

http://jsbin.com/muyeguba/4/

我嘗試了「逐步結束」，顯示更多或更少我想達到的目標。我正在閱讀文檔（http://www.w3.org/TR/css3-transitions/），看起來這是可能的，通過自己創建計時功能？

可能嗎？或JS解決方案會更好？

來源

2014-03-26 punkbit

你不想要轉換，你想要關鍵幀的步驟（http://css-tricks.com/snippets/css/keyframe-animation-syntax/） –

@Paulie_D感謝您的期待！其實這就是我的意思，我會編輯一個錯誤的問題。如果你檢查我的例子多數民衆贊成我沒有成功嘗試。儘管如此，我仍然需要看看你的鏈接。 – punkbit

儘管如此，步入轉換是可行的：轉換定時功能：步驟（4，結束），https://developer.mozilla.org/fr/docs/CSS/transition-timing-function –

這是我的CSS加載動畫從我的網站。既然你沒有提供任何圖片，我會提供我的例子。請注意0財產。 synatx如下：

動畫：名稱持續時間定時功能延遲迭代計數方向;

在我的情況下，direction被省略。

圖片： loader

.loader { 
    display: inline-block; 
    width: 32px !important; 
    height: 32px !important; 
    background-image: url("loader.png"); 
    background-repeat: no-repeat; 
    background-size: 2400px 32px; 
    animation: play16 3.25s steps(75) infinite; 
} 
@keyframes play32 { 
    from { background-position: 0px; } 
    to { background-position: -2400px; } 
}

在steps(75)，數量必須匹配的「框架」你的精靈含有量，否則動畫將切斷或一些幀將重複。

我使用prefix-free來消除對供應商前綴的需求。你可以使用這個，或手動爲代碼加上前綴。

來源

2014-03-26 15:56:42 SeinopSys

謝謝！其實我發現我做錯了什麼，但確實如此。 – punkbit

感謝大家回覆！

所以，我做錯了：

.animate { 
    background-image: url(image-strip-with-a-11-block); 
    width: 53px; 
    height: 78px; 
    background-position: 0, 0; 
    animation:play 1s infinite steps(10); 
} 

@keyframes play { 
    0% { background-position: 0px; } 
    25% { background-position: 100px, 0px; } 
    50% { background-position: 200px, 0px; } 
    75% { background-position: 300px, 0px; } 
    100% { background-position: 400px, 0px; } 
}

應改爲：

.animate { 
    background-image: url(image-strip-with-a-11-block); 
    width: 53px; 
    height: 78px; 
    background-position: 0, 0; 
    animation:play 1s infinite steps(10); 
} 

@keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
}

首頁這可以幫助別人，將來別人！

謝謝！

來源

2014-03-26 15:58:12 punkbit

如何從一個帶創建一個階梯式動畫？

回答

相關問題