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

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

  •  -1
  • Harper Creek  · 技术社区  · 6 年前

    这个问题已经有了答案:

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

            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 回复  |  直到 6 年前
        1
  •  1
  •   traktor    6 年前

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

    animation: bounce 450ms 1.5s;
    

    等待缩放完成。

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