CSS3 - 動畫精靈網格

我一直在嘗試瞭解CSS動畫屬性，我有這個精靈網格表我需要運行，我已經看到動畫的行和網格樣式的例子，但當我嘗試應用並適應我的精靈表時，我遇到了顯示問題。CSS3 - 動畫精靈網格

這是我目前的CSS & HTML：

.logo { 
 
    width: 120px; 
 
    height: 100px; 
 
    margin: 2% auto; 
 
    background: url('http://res.cloudinary.com/df0nhzq7v/image/upload/v1484325835/bvd2_1024_fxwhvl.png') left top; 
 
    -webkit-animation: playv .6s steps(6) infinite, playh 1s steps(6) infinite; 
 
} 
 

 
@-webkit-keyframes playv { 
 
    0% { background-position-y: 0px; } 
 
    100% { background-position-y: 100%; } 
 
} 
 

 
@-webkit-keyframes playh { 
 
    0% { background-position-x: 0px; } 
 
    100% { background-position-x: 100%; } 
 
}

<div class="logo"></div>

Codepen：http://codepen.io/BenSagiStuff/pen/ZLOJKM

來源

2017-01-16 B. Davies

有在劇中的幾個問題在這裏。首先是你的動畫屬性有不正確的值。你需要從改變：

animation: 
    playv .6s steps(6) infinite, 
    playh 1s steps(6) infinite;

到：

animation: 
    playv 5s steps(5) infinite, 
    playh 1s steps(7) infinite;

這是很重要的步驟，函數採用正確的參數，使得playv是包含精靈的數量也有在Y方向playh包含x方向上的精靈數量。 playv的時間也需要足夠慢以適當的動畫格，實際上相當於你的持續時間乘以精靈網格中的行數。這可以簡化爲下面的公式：

animation: 
    playv (duration * rows) steps(rows) infinite, 
    playh duration steps(cols) infinite;

其次，你提供的圖像作爲精靈網格太大。它包含圖像右側和底部的空白/填充。由於這一結果，以下行錯誤地計算：

@-webkit-keyframes playv { 
    0% { background-position-y: 0px; } 
    100% { background-position-y: 100%; } 
} 

@-webkit-keyframes playh { 
    0% { background-position-x: 0px; } 
    100% { background-position-x: 100%; } 
}

你要麼需要，使其完全符合更新精靈電網，或指定酷似這樣的像素：

@-webkit-keyframes playv { 
    0% { background-position-y: 0; } 
    100% { background-position-y: -550px; } 
} 

@-webkit-keyframes playh { 
    0% { background-position-x: 0; } 
    100% { background-position-x: -903px; } 
}

Here's the working codepen.

來源

2017-01-16 12:33:54

我明白了！感謝您解釋動畫屬性！ –

CSS3 - 動畫精靈網格

回答

相關問題