JS 流行库（六）：Animate

原创

已于 2022-11-03 09:13:08 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3

于 2022-09-28 18:21:25 首次发布

本文介绍 Animate.css 库的基本使用方法，包括如何导入库文件、设置动画样式及自定义动画。同时探讨了如何利用 CSS3 实现更灵活的动画效果。

JS 流行库（六）：Animate

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

基本使用

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

导入 Animate.css 库

示例如下：

<link rel="stylesheet" href="./animate.min.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">