使用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动画雪碧网格？

回答

相关问题