我正在使用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动画?或者我做错了什么?
提前感谢您的帮助。