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

nginx -c C:\custom\path\nginx.conf速记CSS属性中的第二个时间值设置了nginx: [emerg] CreateFile() "C:\custom\path\mime.types" failed (2: The system cannot find the file specified) in C:\custom\path\nginx.conf:18值：

animation

等待缩放完成。

（第一个时间值450ms用于animation-delay值。）

使动画在过渡后运行

1 个答案: