我正在尝试使用精灵表来生成动画效果。我的例子如下。图像垂直滚动。我希望图像保留在一个地方并给我动画效果,而不是垂直向下滚动。我的CSS中缺少什么?
@total-duration: 4s;
@steps-per-row: 15;
@duration-per-item: @total-duration / @steps-per-row;
body {background: #000;}
#interactive-animation {
margin: 0 auto;
width: 128px;
height: 128px;
background: url('https://amazed.png') center center;
-webkit-animation:
play-vertical @total-duration steps(@steps-per-row) infinite,
play-horizontal @duration-per-item steps(@steps-per-row) infinite;
animation:
play-vertical @total-duration steps(@steps-per-row) infinite,
play-horizontal @duration-per-item steps(@steps-per-row) infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
#interactive-animation:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes play-vertical {
0% { background-position-y: 0; }
100% { background-position-y: 100%; }
//100% { background-position-y: -29px; }
}
@-webkit-keyframes play-horizontal {
0% { background-position-x: 0; }
100% { background-position-x: 100%; }
//100% { background-position-x: -1814px; }
}
答案 0 :(得分:0)
尝试以下代码,要执行sprite animation
我们需要包含CSS steps() animation functions
,steps()
用于打破连续动画或转换为步骤。
body{
background:black;
}
#interactive-animation {
margin: 120px auto;
width: 120px;
height: 120px;
background: url('https://samsungvr.com/ui/CMS/wow.png');
-webkit-animation: mv 2s steps(2) infinite;
overflow:hidden;
}
@-webkit-keyframes mv{
0% { background-position-y: 0; }
100% { background-position-y: 100%; }
}
<div id="interactive-animation"></div>