JS 流行库（六）：Animate

JS 流行库（六）：Animate

Animate.css 是一个动画库，可以通过为元素添加相应类名从而快速实现动画效果

基本使用

swiper-animate 是在 Animate.css 的基础上产生的，所以如果会使用 swiper-animate 那么就会使用 Animate.css

1. 导入 Animate.css 库

示例如下：

<link rel="stylesheet" href="./animate.min.css">

2. 样式

示例如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 100px;
        height: 80px;
        background-color: orange;
        border-radius: 5px;
        box-shadow: 0 0 10px black;
        margin: 50px auto;
    }
</style>
<div class="animate__animated animate__bounce"></div>

在最新版本的 Animate 中，所有的类名之前必须写前缀 animate__，此外，由于 Animate.css 库中的动画均是预定义的，所以也可以通过 CSS3 的语法添加动画，示例如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 100px;
        height: 80px;
        background-color: orange;
        border-radius: 5px;
        box-shadow: 0 0 10px black;
        margin: 50px auto;
        animation: bounce;
        animation-duration: 2s;
    }
</style>
<div></div>

通过 CSS3 语法添加动画的优势在于可以自定义持续时间、延迟时间以及执行次数等，当然，通过 Animate.css 的预定义类也可以设置持续时间、延迟时间以及执行次数等，不过存在一定限制，示例如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 100px;
        height: 80px;
        background-color: orange;
        border-radius: 5px;
        box-shadow: 0 0 10px black;
        margin: 50px auto;
    }
</style>
<div class="animate__animated animate__bounce animate__delay-2s animate__infinite"></div>

在 Animate.css 中可以自定义某些全局设置（持续时间、延迟时间等），示例如下：

:root {
    --animate-delay: 2s;
    --animate-duration: 5s;
}

如果在某一个元素的 CSS 中添加相同属性，那么将覆盖相应的全局设置，示例如下：

div {
    width: 100px;
    height: 80px;
    background-color: orange;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    margin: 50px auto;
    --animate-duration: 500ms;
}

自定义动画

如果观察 Animate.css 源码，可以知道底层实现原理是 CSS3 动画，所以我们可以自定义 CSS3 动画，示例如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    :root {
        --animate-delay: 2s;
        --animate-duration: 5s;
    }

    div {
        width: 100px;
        height: 80px;
        background-color: orange;
        border-radius: 5px;
        box-shadow: 0 0 10px black;
        margin: 50px auto;
    }

    @-webkit-keyframes myFadeIn {
        from {
            opacity: 0;
            transform: scale(2);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes myFadeIn {
        from {
            opacity: 0;
            transform: scale(2);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .myFadeIn {
        -webkit-animation-name: myFadeIn;
        animation-name: myFadeIn;
    }
</style>
<div class="animate__animated myFadeIn">Animate</div>