Why does the svg element shift its position at the end of animation?

Question

I am animating a rocket, which I first drew up using Inkscape (I am practising SVG animation using this codepen - SVG Rocket Animation).

I made the dimensions of the SVG canvas so that the contents of the viewbox would roughly fit into my browser window, so I made the dimensions of the SVG canvas 1280x527px.

Then I made the containing div a flexbox, with width 100% and other attributes as below in the code. (I don't show all of the svg code as it takes up too much space here.)

When I test the svg file by directly opening it in the browser window (i.e. without putting it into an html file first), it looks as expected. (I use Google's Chrome btw.)

When I put the svg into an html file, with the CSS style settings as explained above (so the whole SVG viewbox fits snuggly into the browser window when fully opened), it looks as expected too.

But an unexpected thing happens after I animate the rocket - the animation involves the rocket translating directly vertically upwards and shrinking to nothing (by using scale and transform (translate)). After the animation ends, the rocket is not in the middle of the browser window (as it was in the svg and the html before the animation), but is on the right side of the page. In the coding for the animation, I left animation-fill-mode blank, which by default is backwards. I also tested the animation with the backwards animation fill mode, and the rocket still does not end up in the center of the page (on the x-axis.)

I suspect this has something to do with the transform origin of the SVG element, which is (50% 0), and/or the differing coordinate systems of the html file and the SVG canvas.

Can anyone explain the behavior of the element (rocket) shifting to the right after the animation has finished? And how can I fix this, so that the rocket sits in its original place (i.e. near the center of the x-axis) after the animation finishes.

CSS style code:

html, body {
   height: 100%;
   margin: 0%;
   padding: 0%;
}
body {
  height: 100vh;
  display: flex;
  background-color: white;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
} 
#glass {
  position: relative;
 width: 100%;
background-color: white;
  display: flex;
 flex-direction: column;
align-items: center;
  justify-content: center;
}
svg {position:  relative;
}
#rocket {
  transform-origin: 50% 0;
  animation: takeOff 3s 5 ease-in;
}
@keyframes takeOff {
  0% {
    transform: scale(0.8) translateY(40px);
  }
  80%,100% {
    transform: scale(0) translateY(20px); }
}

This is the html code (not complete):


Rocket Flame

Below is the svg file in the browser window. It looks as expected, with the rocket in the middle of the page in the x-axis.

Below is the browser window screenshot of the html file with no animation added, except the size of the rocket was scaled down (0.8x) - it appears as expected, in the center bottom of the page:

Below is the browser window screenshot taken during the animation - the rocket shoots up and gets smaller, as expected:

Below is the browser window screenshot after the animation has ended:

I tested the animation with the transform-origin as center, and the rocket still ended up on the right side of the page.

I also animated the clouds, so that they descend (but without shrinking), and they end up as expected, in the middle of the page (on the x-axis).

I also had to scale the rocket to 0.8x its original size at the start of the animation, as well as translate it on the Y-axis by 40px, because if I didn't, the rocket would appear much larger than expected and the animation would start too high in the viewport at the start of the animation.

PS. I tested the animation again by changing the keyframes to this:

@keyframes takeOff {
  80%,100% {
    transform: scale(0) translateY(20px); }
}

and the rocket ascends as expected and shrinks to nothing, but the rocket is shifted to the right from the beginning of the animation, and stays on the right during the animation and ends on the right at the end of the animation.

I reproduced the codepen (link above) on which I based my animation, and the rocket ends up in the center of the page, but the svg dimensions are different to mine (theirs is viewBox="0 0 446 415) and not much else is added to the css style sheet in their case.

EDIT: I added the svg code.

Why does the svg element shift its position at the end of animation?

Answers (1)

Related Questions