css svg动画可以工作,但不能在画布上绘制,只能在Firefox上使用

时间:2018-02-21 16:22:30

标签: css animation firefox canvas svg

我正在使用css来制作svg动画。目标是使用js使角色在2d等距网格上移动。 svg然后在画布上绘制。

我的问题是,虽然Chrome上的一切正常: https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-chrome.gif

它在Edge上完全不起作用,这是预期的,因为Edge不支持svg css动画: https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-edge.gif

然而,有趣的是,虽然css svg动画似乎适用于Firefox,但是一旦我在画布上绘制svg,它就会停止工作并卡在第一帧上: https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-firefox.gif

以下是我如何制作动画的代码摘录:

#leg_x5F_back_x5F_top {
          transform-box: fill-box;
  -webkit-animation : leg_back_top 1.5s linear infinite;
          animation : leg_back_top 1.5s linear infinite;

}
@keyframes leg_back_top {
  0% {
      -webkit-transform-origin: 100% 40%;
              transform-origin: 100% 40%;
      -webkit-transform: translate(10%, -10%) rotateZ(-10deg);
              transform: translate(10%, -10%) rotateZ(-10deg);
  }
  [...]
  80% {
      -webkit-transform-origin: 20% 40%;
              transform-origin: 20% 40%;
      -webkit-transform: translate(-20%, 0%) rotateZ(30deg);
              transform: translate(-20%, 0%) rotateZ(30deg);
  }
}

所以我的问题是:这种行为是否正常并且可以从Firefox预期?也许不支持在画布上绘制的CSS动画?或者我做错了什么?

提前感谢您的帮助。

0 个答案:

没有答案