使动画在过渡后运行[重复]

Question

我怎样才能让反弹动画在对象完成缩放后运行，使其看起来都是流畅的？动画延迟属性似乎与过渡延迟属性不匹配。感谢您的帮助。

        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

animation 速记 CSS 属性中的第二个时间值设置 animation-delay 值：

animation: bounce 450ms 1.5s;

等到缩放完成。

（animation-duration值使用第一个时间值450ms。）