Making animation run after transition

Question

How can I make the bounce animation run after the object finishes scaling so it appears to all be fluid? The animation delay property doesn't seem to match up with the transition delay prop. Thanks for any help.

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

    div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        transition-duration: 1.5s
        
    }
            
    .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='piss'>
<div id='test'> </div> 
    </div>

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

Answer 1

A second time value in the animation shorthand CSS property sets the animation-delay value:

animation: bounce 450ms 1.5s;

waits until scaling has finished.

(The first time value of 450ms is used for the animation-duration value.)