使用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>
答
我添加了一个背景标注样式,并重新安排你的一些性质
结果几乎确定;但你的精灵电网似乎是失灵
.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>
在M看来,这很难,你正在努力实现(如果我是对的它就像一个动画GIF)与精灵的东西。如果我这样做,我会将精灵分割成相同大小的单个图像,并使用具有自动过渡的滑块,滑块之间的快速“淡入淡出”效果,无需用户交互(箭头等)。我会更容易。但这只是我的2美分。 GI与您的项目 –
默认情况下请使用标准的CSS功能,'动画'和'@ keyframes',而不是他们供应商提供的前缀实验类比。这可确保您的代码将以同样的方式被所有现代浏览器解释。如果您确实需要支持真正需要供应商前缀的非常旧的浏览器,则可以随时使用Autoprefixer等工具自动添加它们。 –
@AlvaroMenéndez:什么是滑块?你能指点我的例子吗?谢谢 – Vishal