css - 使用 CSS 为 SVG Sprite 制作动画

Question

我有一些 svg Sprite ，想在网站上为它们制作动画。 使用这些文件的推荐方法是什么？

首先，这是我的 Hunter (raw covert) - 我将它作为 eps 并通过 indesign 转换为 svg。

我的参赛作品是通过 css 通过改变关键帧动画中的当前图片来对其进行动画处理。

想法:

1. 我找到了 this精彩的博文，其中当前图像是通过 anchor 选择的
2. 使用背景位置

所以我在我的文件中识别了不同的图像，给了他们一个 ID 并隐藏了其他的。您可以使用#a #b #c .... 进行互连。

Hunter Image #a

-> 问题: Sprite 上的位置仍然不同。我还必须更改背景位置。

https://jsfiddle.net/roest/035r0ozq/

0% {
    background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#a);
  }
  20% {
    background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#b);
  }

条目 2 - 像普通 Sprite 一样使用 background-position ... 但似乎还是有些东西坏了。

如果您将 getspritexy.com 与普通 Sprite 一起使用，您会在“生成的 Sprite 图像”中看到选择。使用我的 svg 你会看到多个图像...... 我的 testFiddle 中的结果相同:

https://jsfiddle.net/roest/4bbnnm9t/

0% {
        background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -83px -15px;
        width: $width;
        height: $height;
      }
      20% {
        background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -131px -15px;
        width: $width;
        height: $height;
      }

我的哪个想法是最好的，我怎样才能让我的猎人正确地制作动画？

Answer 1

要让您的框架从一个位置步进到另一个位置而不滑动，您可以使用 step-end 作为计时功能。

animation: hunter-animation 2.5s step-end both infinite;

参见:https://jsfiddle.net/4bbnnm9t/3/

既然它开始了，您只需调整位置使其正确即可。