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>

why you keep repeating the same question again : https://stackoverflow.com/questions/54263252/using-bounce-animation-on-a-scaled-element / https://stackoverflow.com/questions/54281912/bounce-animation-on-a-scaled-object ? — Temani Afif, Jan 21 '19 at 08:55

score 1 · Accepted Answer · answered Jan 21 '19 at 01:27

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.)

answered Jan 21 '19 at 01:27

traktor

17,588
4
32
53

Making animation run after transition

1 Answers1