animate.css介绍
- animate.css是一个跨浏览器的css3动画库
animate.css基础使用
- 引入animate.css文件
- 给指定的元素添加基础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结合使用
<!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动画属性设置
- 编写动画属性, 覆盖animate.css库中的默认属性
- 编写的时候注意选择器的权重
<!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{
/*设置动画属性*/
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动画结束后回调
- 使用jQuery的one监听动画结束, 然后添加回调函数
- 动画结束事件 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{
/*设置动画属性*/
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>
