Animate.css的详解
2017-03-28 本文已影响0人
TheoLin
说明
Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。
用法
- 导入文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
- 给指定元素加上指定的动画样式
<div class="animated bounce"></div>
这里有两个类，第一个是必须类，每一个应用animate.css效果的元素都必须添加这个类名。第二个是不同效果的类，选择你想要的效果的类名添加即可。
- 如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#element').addClass('animated bounce');
- 当动画效果执行完成后还可以通过以下代码添加事件
$('#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; //动画执行次数
}
