Animate.css 一款強大的預(yù)設(shè)css3動畫庫
教程網(wǎng)址：http://www.jq22.com/yanshi819
下載和使用:http://www.mamicode.com/info-detail-2189430.html
下載地址：http://www.haorooms.com/uploads/example/Animatecss/
直接在頁面頂部head標(biāo)簽通過link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
image.png
image.png
用法
1、首先引入animate css文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
2楣号、給指定的元素加上指定的動畫樣式名
<div class="animated bounceOutLeft"></div>
這里包括兩個class名，第一個是基本的蔽介，必須添加的樣式名慢洋，任何想實現(xiàn)的元素都得添加這個吹泡。第二個是指定的動畫樣式名夜焦。
3、如果說想給某個元素動態(tài)添加動畫樣式罩息，可以通過jquery來實現(xiàn)：
$('#yourElement').addClass('animated bounceOutLeft');
4嗤详、當(dāng)動畫效果執(zhí)行完成后還可以通過以下代碼添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
你也可以通過 JavaScript 或 jQuery 給元素添加這些 class个扰，比如：
$(function(){
$('#jq22').addClass('animated bounce');
});
有些動畫效果最后會讓元素不可見瓷炮，比如淡出、向左滑動等等递宅，可能你又需要將 class 刪除娘香，比如：
$(function(){
$('#jq22').addClass('animated bounce');
setTimeout(function(){
$('#jq22').removeClass('bounce');
}, 1000);
});
animate.css 的默認設(shè)置也許有些時候并不是我們想要的，所以你可以重新設(shè)置办龄，比如：
#jq22{
animate-duration: 2s; //動畫持續(xù)時間
animate-delay: 1s; //動畫延遲時間
animate-iteration-count: 2; //動畫執(zhí)行次數(shù)
}
最簡單的用法：
image.png
image.png
與JQ使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animate庫的使用</title>
<!--引入animate.css庫文件-->
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<style>
.box {
width: 200px;
height: 200px;
background-color: purple;
margin: 80px auto;
}
</style>
</head>
<body>
<a href="">按鈕</a>
<!--給指定的元素加上指定的動畫樣式名-->
<div class="box animated bounce"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').click(function(){
$('.box').addClass('animated bounce');
})
})
</script>
</body>
</html>
