animate css动画小功能

masju

已于 2022-10-27 17:20:09 修改

阅读量736

点赞数

分类专栏： JQ学习笔记文章标签： css3 animation

于 2021-04-06 09:24:09 首次发布

本文链接：https://blog.csdn.net/masju/article/details/115454032

版权

JQ学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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;}