html css animate,animate.css的使用方法

animate.css介绍

animate.css是一个跨浏览器的css3动画库

animate.css基础使用

引入animate.css文件

给指定的元素添加基础class animated

给指定的元素添加动画class

如果需要无限做动画, 添加 infinite 类名即可

Title

div{

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');

})

})