使用CSS3動畫雪碧網格？

我有這個示例精靈網格表，我需要運行和動畫。我能夠達到某一點，但努力使其完美。動畫不那麼流暢，另外，圖像沒有正確對齊。在動畫過程中，您可以看到圖像元素未與視圖中的其他元素居中。這是我的HTML和CSS3代碼到目前爲止。使用CSS3動畫雪碧網格？

.hi { 
    width: 910px; 
    height: 340px; 
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress"); 
    position: relative; 
    -webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) 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="hi"> 
</div>

小提琴：http://jsfiddle.net/bf5ckdv9/

來源

2017-08-28 Vishal

在M看來，這很難，你正在努力實現（如果我是對的它就像一個動畫GIF）與精靈的東西。如果我這樣做，我會將精靈分割成相同大小的單個圖像，並使用具有自動過渡的滑塊，滑塊之間的快速「淡入淡出」效果，無需用戶交互（箭頭等）。我會更容易。但這只是我的2美分。 GI與您的項目 –

默認情況下請使用標準的CSS功能，'動畫'和'@ keyframes'，而不是他們供應商提供的前綴實驗類比。這可確保您的代碼將以同樣的方式被所有現代瀏覽器解釋。如果您確實需要支持真正需要供應商前綴的非常舊的瀏覽器，則可以隨時使用Autoprefixer等工具自動添加它們。 –

@AlvaroMenéndez：什麼是滑塊？你能指點我的例子嗎？謝謝 – Vishal

我添加了一個背景標註樣式，並重新安排你的一些性質

結果幾乎確定;但你的精靈電網似乎是失靈

.hi { 
 
    width: 910px; 
 
    height: 340px; 
 
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress"); 
 
    position: relative; 
 
    animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite; 
 
    border: solid 1px blue; 
 
    background-size: 500% 500%; 
 
    background-repeat: no-repeat; 
 
} 
 

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

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

<div class="hi"> 
 
</div>

來源

2017-08-29 16:38:38 vals

使用CSS3動畫雪碧網格？

回答

相關問題