Я не могу сделать смайлики анимации css svg похожими на анимацию Pinterest

Question

Я не могу создать CSS-анимацию со своим SVG-спрайтом, похожим на Pinterest. В спрайте 90 кадров, но я не могу заставить его работать.

Pinterest анимация Emojis

View Pinterest Sprite 90 frames in Svg

Мой код:

.emoji{
  width: 110px;
  height: 110px;
  background-image : url(https://s.pinimg.com/webapp/style/images/wow-0a7ea725.svg);
  animation: moveX 1s steps(90) infinite;
}

@keyframes moveX{
  from{background-position-x:0px;}
  to{background-position-x:-500px;}
}

<div class="emoji"></div>

Мой JSFiddle

_{Свободный перевод вопроса I Can't make css svg animation emoji similar to Pinterest reactions от участника @David Puma Rios.}

Answer 1

Примерно так:

.emoji {
  width: 110px;
  display: inline-flex;
  background-image: url(https://s.pinimg.com/webapp/style/images/wow-0a7ea725.svg);
  background-size: auto 100%;
  animation: moveX 1s steps(90) infinite;
}

.emoji::before {
  content: "";
  padding-top: 100%; /* keep the square ratio */
}

@keyframes moveX {
  to {
    background-position: right; /* you only need to move to right */
  }
}

<div class="emoji"></div>
<div class="emoji" style="width:50px"></div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Я не могу сделать смайлики анимации css svg похожими на анимацию Pinterest

Ответы (1 шт):