Animate.css的详解

说明

Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。

用法

1. 导入文件

2. 给指定元素加上指定的动画样式

这里有两个类，第一个是必须类，每一个应用animate.css效果的元素都必须添加这个类名。第二个是不同效果的类，选择你想要的效果的类名添加即可。

3. 如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

$('#element').addClass('animated bounce');

4. 当动画效果执行完成后还可以通过以下代码添加事件

$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function);

注意

当效果执行完，元素还在文档流中占据着空间（即使你已经看不到元素），所以如果你想让元素真正消失，要在执行完动画时把元素隐藏起来，如：

$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  $(this).hide();
});

不然有可能会产生一些你不希望出现的bug。

原理

animated类的代码如下：

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

bounce类的代码如下：

@-webkit-keyframes bounce {
    0%,
    100%,
    20%,
    53%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {
    0%,
    100%,
    20%,
    53%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -30px, 0);
        -ms-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform: translate3d(0, -15px, 0);
        -ms-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        -ms-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

由此我们很清楚地知道animate.css就是利用css3 animation属性实现这些动画效果，从.animated中我们得知动画效果限制在1s中，这可能不是我们所想要的，所以我们可以对应用的元素进行一些修改，如：

element {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}