css - 我无法制作类似于 Pinterest react 的 css svg 动画表情符号

Question

我无法使用类似于 Pinterest 的 SVG Sprite 制作 CSS 动画。
Sprite 是 90 帧，但我无法让它工作
Pinterest react 表情符号

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:
https://jsfiddle.net/u81xkcon/

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>