CSS - Jumpy Scale Transition Issue - css

Question

I have a square wrapper with a circle inside, like on this fiddle
https://jsfiddle.net/Lazarus97/3bntmd8g/1/
<div class="card">
<div class="circle">
<p>
SOME
<br>
Text Test
</p>
</div>
</div>
<style>
body {
display: flex;
min-width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.card {
width: 200px;
height: 200px;
background: #eee;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle {
background: red;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transform: translateY(80px) scale(1);
transition: transform .3s ease-in; /* SAME AS ITS CHILD */
}
.circle:hover {
transform: translateY(0px) scale(3);
}
.circle * {
transition: transform .3s ease-in; /* SAME AS ITS PARENT */
}
.circle:hover *{
transform: scale(0.333333333); /* I got this number like this --> 1 / scale(3) 1/3 = 0.333333333 */
}
</style>
but notice how the text inside the circle jumps as you hover the circle, it gets bigger then smaller again, even though I did the math correctly, and created the same transition easing motion.
it should remain the original size during the transition.
Does anybody knows why this happens and is there a way to fix this?
I tried to fix it with the different transition easing motions.

Answer 1

"...why this happens...":
The content of your .circle scales as the .circle scale. That means that you correctly calculated that at the end of the transition, if the circle is 3 times bigger, the content needs to be 3 times smaller to stay the original size. During the transition though, at 0.5 of the transition (0.15 seconds in your case) - the circle is 2 times bigger than it originally were, while the content is 1/3 smaller (that is 2/3=0.6̅), but ALSO 2 times bigger (so it's actually 4/3=1.3̅), as it scales with the circle.
"...is there a way to fix this...":
You either need to make those two objects independent, or find the equation to calculate how smaller does the content need to be at every point in time to be exactly the same size as originally if it scales with it's parent and then apply the results to an animation property with #keyframes at every %. But that is not perfect and would probably have stuttering effect on slower devices.

Answer 2

At first, when you scale the element you scale all its content, and you are doing two animations, both are initiated with :hover and both are ease-in which increase the effect, you can do it softly decreasing the max scale and turning to linear the second animation, that hides very much the effect but stills not being the best.
.circle:hover {
transform: translateY(0px) scale(2);
}
.circle * {
transition: transform .3s linear; /* SAME AS ITS PARENT */
}
You should decrease de min scale too.
.circle:hover *{
transform: scale(0.5);
}
In case you decide still using scale(3), you can use calc() to the best match.
.circle:hover *{
transform: scale(calc(1/3));
}