Блог

Я пытаюсь использовать лист спрайтов для создания эффекта анимации. Мой пример приведен ниже. Изображение прокручивается по вертикали. Я бы хотел, чтобы изображение оставалось в одном месте и давало мне анимационные эффекты вместо прокрутки по вертикали вниз. Чего не хватает в моем 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; }
}
  

Попробуйте приведенные ниже коды, для выполнения 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>