使用精灵表无法正确渲染图像

时间:2016-10-05 22:18:04

标签: html5 css3 css-animations css-sprites

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

1 个答案:

答案 0 :(得分:0)

尝试以下代码,要执行sprite animation我们需要包含CSS steps() animation functionssteps()用于打破连续动画或转换为步骤。

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>