1、动画结束回调:

    const element = document.querySelector('.loadbar');//动画dom对象
    element.addEventListener('animationend', () => {//当前动画结束后时间
        element.classList.remove('animate__bounceInDown');
        element.classList.add('animate__shakeX','animate__slower','loopanimate');
    });
<style>
.loopanimate{

    animation-iteration-count:infinite;
}
</style>

2、动画延迟
animate.css
**

V4版本

**
预设动画延迟是1-5s的延迟。
但是有时候我们为了控制效果需要对延迟进行更小粒度的控制:
比如0.5秒那我们可以在动画所在的class中添加自定义延迟类名:animate_yc_half
然后在css中
.animate_yc_half{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; --animate-delay: 0.5s;}

Logo

分享最新的 NVIDIA AI Software 资源以及活动/会议信息,精选收录AI相关技术内容,欢迎大家加入社区并参与讨论。

更多推荐