使用Animate.css快速构建动画。

   <style>
     .wrap1 li:nth-of-type(1){
        animation-delay: 0s;
    }
    .wrap1 li:nth-of-type(2){
        animation-delay: .1s;
    }
    .wrap1 li:nth-of-type(3){
        animation-delay: .2s;
    }
    .wrap1 li:nth-of-type(1) .user{
        animation-delay: .4s;
    }
    .wrap1 li:nth-of-type(2) .user{
        animation-delay: .5s;
    }
    .wrap1 li:nth-of-type(3) .user{
        animation-delay: .6s;
    }
    .wrap1 li:nth-of-type(1) .icon{
        animation-delay: 0.4s;
    }
    .wrap1 li:nth-of-type(2) .icon{
        animation-delay: 0.5s;
    }
    .wrap1 li:nth-of-type(3) .icon{
        animation-delay: 0.6s;
    }
   </style>

    设置animation-delay  可以让动画有点小层次感

<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<button>sdfsdf</button>


使用animate 时,所添加动画的对象，必须要有个 animated -》class

<script>
var _btn = document.querySelector("button");

_btn.onclick = function(){
    [].forEach.call(document.querySelectorAll(".wrap1 *"),function (item){

        item.types = item.className;
        item.className = "";

    });

    setTimeout(function (){
        [].forEach.call(document.querySelectorAll(".wrap1 *"),function (item1){
            item1.className = item1.types;
        })
    },100)
};复制代码

document.querySelector('ul *') 就是得到ul 下 所有元素节点;得到的数组是类似组类型 ，不具有 Arry 的方法，所有不用调用forEach方法 只能用call 强行 替换this； 或者用for 大家都非常熟悉；

保留当前 item 的class 寄存在 types 中，随不会直接显示在html 的属性里。但console.log一下还是可以打印出来的。只要相同
item 时都存在当前 types 属性