Animated div appears to erect from bottom-right with transform-origin set to center

Question

I want to scale a div while still having it centered via. translate(-50%, -50%). This works for the most part, but it's as if the transform in the div is being ignored. When the animation occurs, the div scales and centers itself, but it looks like the div is "popping up" (scaling) from its bottom-right corner (as if the transformation weren't there before the animation was set).

@keyframes scaleAnimation
{
    from
    {
        transform: scale(0.75) translate(-50%, -50%);
    }
    to
    {
        transform: scale(1) translate(-50%, -50%);
    }
}

.parentClass
{   
    position: absolute;
    top: 50%;
    left: 50%;

    transform-origin: center;
    transform: translate(-50%, -50%);
    
    animation: scaleAnimation 0.3s;
}

What is a solution that (ideally) requires no JavaScript?

Answer 1

In the transforms order matters. I edited your code. Hope this is what you're looking for:

@keyframes scaleAnimation
{
    from
    {
        transform: translate(-50%, -50%) scale(0.75) ;
    }
    to
    {
        transform: translate(-50%, -50%) scale(1);
    }
}

.parent-class
{   
    width: 100px;
    height: 100px;
    background: #4565ff;
    position: absolute;
    top: 50%;
    left: 50%;

    transform-origin: center center;
    transform: translate(-50%, -50%);
    animation: scaleAnimation 1s infinite;
}

<div class="parent-class"></div>