Неправильное отображение изображения с помощью 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; }
}

1 ответ

  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>