CODEWITHSUNDEEP
htmlcsssvg
LiranC
LiranC

Reputation: 2480

CSS animation differences between SVG/HTML elements

I have the same object as SVG and as PNG. I am trying to animate them with those set of rules:

@-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; 
}

here are the animations with the same rules. why the SVG animation looks so much better while the HTML animation looks like rotating around its own axis?

SVG Animation

HTML Animation

Upvotes: 0

Views: 97

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

I have the same object as SVG and as PNG

No you don't. Your animations are completely different.

  1. The PNG and SVGs have completely different sizes, shapes and layout.
  2. The PNG is being animated as a whole
  3. The SVG is having one element within it animated.
  4. transform-origin on a <g> element inside an SVG works differently from transform-origin on an HTML element. Inside an SVG, it is affected by the viewBox.

Upvotes: 3

Related Questions