css動畫精靈表

我有一個骰子在裏面的spritesheet; 6面。其面是70×70像素總子畫面圖像被70×420像素css動畫精靈表

現在我想使一個CSS動畫變爲從1至6個（這是簡單的）另外我想改變大小;在50％的兩倍，並在100％恢復正常。

:local(.mydice) 
{ 
    width: 70px; 
    height: 70px; 
    background: url('/images/dices.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
    background-size: 100% 600%; 
    animation: dicemove1 5s steps(6, end) infinite; 
}

，然後使用關鍵幀，使改動：

@keyframes dicemove1 
{ 
    0% { background-position: 0px 0px;} 
    100% { background-position: 0px -420px; } 
}

上面的CSS代碼段工程。但現在添加代碼，使其生長失敗：

50% { width: 140px; height: 140px; margin-top: -35px; margin-left: -35px; background-position: 0px ???? }

我知道背景，地位，必須改變以支持更大的尺寸，但問題是我使用的步驟，因爲我不想通過圖像滾動，但（1,2,3,4,5,6）

將100除以6不會產生一個很好的圓整數，這使得50％的變更有點困難。一直在尋找可以處理步驟的關鍵幀，但還沒有找到這樣的事情。任何人都知道一種方法來做到這一點？

來源

2017-07-16 Reneb

我找到了解決方案。

transform: scale(2,2);

這會增加骰子。現在我可以同時使用2個動畫; 1改變臉部其他改變尺寸

animation: anim1 1s steps(6, end) infinite, anim2 1s steps(36, end) infinite; 

@keyframes anim1 
{ 
    0% { background-position: 0px 0px; } 
    100% { background-position: 0px -600px; } 
} 

@keyframes anim2 
{ 
    50% { transform: scale(2,2); } 
}

來源

2017-07-16 20:57:19 Reneb

css動畫精靈表

回答

相關問題