CSS transform-origin issue - css

Question

I'm working on a ghost floating here.
The issue I'm having is the transform-origin property. Right now the shadow (the ellipse on the bottom) seems to be expanding from the left to the right and then shrinking in that direction again. The behavior I wanted was for the shadow to expand and shrink from the middle - hence the transform-origin: 50% 50%;.
Here's the relevant code, although it helps to look at the Codepen:
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -64.5px;
margin-top: -85.5px;
}
.shadow {
margin-left: 22px;
animation: shrink 3s ease-out infinite;
transform-origin: center center;
ellipse {
transform-origin: center center;
}
}
#keyframes shrink {
0% {
width: 20%;
}
50% {
width: 27%;
}
100% {
width: 20%;
}
}
If anyone has any ideas, thank you so much! Really struggling with this for some reason.

Answer 1

Okay I got a solution for you.
What I did was use margin and width for the animation to keep it centered. I also gave the p tag that is containing the svg shadow a set width of the ghost to keep the shadow centered.
Here is the css I edited,
.shadowFrame {
width: 130px;
}
.shadow {
animation: shrink 3s ease-out infinite;
transform-origin: center center;
ellipse {
transform-origin: center center;
}
}
#keyframes shrink {
0% {
width: 90%;
margin: 0 5%;
}
50% {
width: 60%;
margin: 0 20%;
}
100% {
width: 90%;
margin: 0 5%;
}
}
Here is the live link.