Анимация png-спрайта по слайдам

Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна png-картинка разбитая не несколько слайдов, которые крутятся с заданными параметрами. Если быть совсем точным, то, они не крутятся, а переключаются. Почему не гифка, потому что в гифке есть проблемы с прозрачностью, и поэтому будем использовать png-картинку и обычное правило animation, подробнее здесь, но для нас важно будет свойство animation-timing-function и его функция steps()

.logo{
  background: url("http://denis-creative.com/wp-content/uploads/2018/10/meteor.png") 0 0 no-repeat;
  width: 130px;
  height: 130px;
  animation: logo 2s steps(47, end) infinite;
}
@keyframes logo {
  from {background-position: 0px 0px;}
  to {background-position: -6110px 0px;}
}

Главная особенность данной функции состоит в том, что вместо плавного движения от 0px к −6110px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимации кадров в png-спрайте. Шаг анимации равен ширине картинки, в приведенном выше примере это 130px, всего 47 шагов, которые проходят 1 полный круг за 2 секунды.

Рабочий пример анимированной png-картинки:

See the Pen Animate img by Denis (@deniscreative) on CodePen.0

Второй пример анимированного png-спрайта

В данном примере анимация проигрывается за 6 секунд и останавливается.
Чтобы просмотреть анимацию сначала — нажмите Rerun в нижнем правом углу окна Codepen.

See the Pen Animate png-sprite 2 by Denis (@deniscreative) on CodePen.0

Более подробно расписаны все составные свойства animation:

.planet {
  animation-name: animate-planet;
  animation-duration: 6s;
  animation-timing-function: steps(149);
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

Что в сокращенном виде будет выглядеть так:

.planet{
  animation: animate-planet 6s steps(149) 1.2s 1 forwards;
}

Плюс — в том, что можно задать прозрачный фон, чего нельзя задать для гифки,
а минус в том, что нужно подготовить спрайт с большим количествоми кадров, которые должны быть четко подогнаны друг под друга.