Animate.css动画

Animate.css动画

第一步： 将animate.css动画库拷贝到css文件夹，利用link引入

<!-- 引入动画库animate.css -->
<link rel="stylesheet" href="css/animate.min.css">

第二步：调用动画— 找到要调用动画的盒子直接在class里面调用animated 和 对应的动效类名（去动画库查看相应的动效直接复制）；

<li class="animated bounceInUp">

使用技巧— 实现动画先后出现
直接去css里面根据自己的需求定义相对应的延迟样式，比如下面的代码：将不同的动画出现的时间依次延迟了0.3秒；

<style>
        .yanshi1 {
            animation-delay: 0.3s;
        }
        .yanshi2 {
            animation-delay: 0.6s;
        }
        .yanshi3 {
            animation-delay: 0.9s;
        }
        .yanshi4 {
            animation-delay: 1.2s;
        }
    </style>

直接去想要延迟出现的盒子上调用

<li class="ck_list_center animated bounceInUp yanshi1">