animate.css介绍
animate.css是一个跨浏览器的css3动画库
animate.css基础使用
引入animate.css文件
给指定的元素添加基础class animated
给指定的元素添加动画class
如果需要无限做动画, 添加 infinite 类名即可
Titlediv{
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
animate.css和jQuery结合使用
Title*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
}
$(document).ready(function () {
console.log('test');
$('#test').addClass('animated infinite rollIn');
})
animate.css动画属性设置
编写动画属性, 覆盖animate.css库中的默认属性
编写的时候注意选择器的权重
Title*{
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;
}
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated swing');
})
animate.css动画结束后回调
使用jQuery的one监听动画结束, 然后添加回调函数
动画结束事件 webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
Title*{
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;
}
$(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');
})
})