我无法制作类似于Pinterest反应的CSS SVG动画表情符号 [英] I Can't make css svg animation emoji similar to Pinterest reactions

问题描述

我无法使用类似于Pinterest的SVG精灵制作CSS动画.精灵是90帧，但我无法正常工作

I can't make a CSS animation with my SVG sprite similar to Pinterest. The sprite is 90 frames, but I can't get it to work

Pinterest反应表情符号

Pinterest Reactions Emojis

在Svg中查看Pinterest Sprite 90帧

我的代码:

.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:

My JSFiddle:

https://jsfiddle.net/u81xkcon/

推荐答案

去这里

.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>

这篇关于我无法制作类似于Pinterest反应的CSS SVG动画表情符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！