SVG / HTML元素之间的CSS动画差异

Question

我有与SVG和PNG相同的对象。 我试图用这些规则为它们制作动画：

@-webkit-keyframes rotate-right {
  from { 
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
#airplane {
   transform-origin: 200px 200px;
  animation: rotate-right 6s linear 0s infinite; 
}

这是具有相同规则的动画。 为什么SVG动画看起来好多了，而HTML动画看起来像围绕自己的轴旋转？

SVG Animation

HTML Animation

Answer 1

  

我有与SVG和PNG相同的对象

不，不。你的动画完全不同。

1. PNG和SVG具有完全不同的尺寸，形状和布局。
2. PNG作为一个整体动画
3. SVG中有一个元素是动画的。
SVG内transform-origin元素上的
4. <g>与HTML元素上的transform-origin的工作方式不同。在SVG内部，它受viewBox。
的影响