Using bounce animation on a scaled element

What is the best way to have something scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the div size prior to scaling. P.S I want this done in one action, the two buttons were just for the example.

function myFunction() {
            var image = document.getElementById('test');
            image.style.WebkitTransform = ('scale(2,2)');
        }
    function myFunction2() {
        var image = document.getElementById('test');
        image.classList.remove('bounce');
        image.offsetWidth = image.offsetWidth;
        image.classList.add('bounce') ;
    }

div#test  {

position:relative;

display: block;

width: 50px;

height: 50px;

background-color: blue;

margin: 50px auto;

transition-duration: 1s;

}
        
.bounce {
    animation: bounce 450ms;
    animation-timing-function: linear;
}

@keyframes bounce{

25%{transform: scale(1.15);}

50%{transform: scale(0.9);}

75%{transform: scale(1.1);}

100%{transform: scale(1.0);}

}

<div id=‘test’> </div>

<button class = ‘butt’ onclick = ‘myFunction()’>FIRST</button>

<button class = ‘butt’ onclick = ‘myFunction2()’>SECOND</button>

#html #javascript