Question

我正在使用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动画？或者我做错了什么？

提前感谢您的帮助。

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

0 个答案: