代码之家 › 专栏 › 技术社区 › Harper Creek

使动画在转换后运行[复制]

scale animation css html javascript

-1

Harper Creek · 技术社区 · 7 年前

这个问题已经有了答案:

Bounce animation on a scaled object 2答

如何使反弹动画在对象完成缩放后运行,使其看起来都是流动的?动画延迟属性似乎与“过渡延迟”属性不匹配。谢谢你的帮助。

        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>

1 回复 | 直到 7 年前

1

traktor 7 年前

中的第二个时间值 animation 速记css属性设置 animation-delay 价值观:

animation: bounce 450ms 1.5s;

等待缩放完成。

(第一次使用450ms的值 animation-duration 价值)