animate.css介紹
- animate.css是一個跨瀏覽器的css3動畫庫
animate.css基礎(chǔ)使用
- 引入animate.css文件
- 給指定的元素添加基礎(chǔ)class animated
- 給指定的元素添加動畫class
- 如果需要無限做動畫, 添加 infinite 類名即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/animate.css">
<style>
div{
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div class="animated swing"></div>
</body>
</html>
animate.css和jQuery結(jié)合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script>
$(document).ready(function () {
console.log('test');
$('#test').addClass('animated infinite rollIn');
})
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
animate.css動畫屬性設(shè)置
- 編寫動畫屬性, 覆蓋animate.css庫中的默認(rèn)屬性
- 編寫的時候注意選擇器的權(quán)重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: gold;
margin: 200px auto;
}
#test{
/*設(shè)置動畫屬性*/
animation-duration: 5s;
animation-delay: 1s;
animation-iteration-count: 2;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script>
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated swing');
})
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
animate.css動畫結(jié)束后回調(diào)
- 使用jQuery的one監(jiān)聽動畫結(jié)束, 然后添加回調(diào)函數(shù)
- 動畫結(jié)束事件 webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 200px auto;
}
#test{
/*設(shè)置動畫屬性*/
animation-duration: 3s;
animation-delay: 5s;
animation-iteration-count: 2;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script>
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated hinge');
$test.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
console.log('hello world'); // 兩次動畫完畢后才打印
console.log(this); // dom元素
$test.removeClass('hinge');
$test.addClass('animated rotateIn');
})
})
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
