图像未使用 sprite 正确渲染 sheet

Question

我正在尝试使用 sprite sheet 来生成动画效果。我的例子如下。图像垂直滚动。我希望图像保留在一个地方并给我动画效果，而不是垂直向下滚动。我的 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; }
}

Answer 1

尝试下面的代码，要执行 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>

图像未使用 sprite 正确渲染 sheet

Image not rendering correctly using sprite sheet

html

css

css-sprites

css-animations