animate.css的简单使用

简介

Animate.css是一款非常好的,跨浏览器的动画库。

浏览器兼容性

因为animate.css的底层是css3,所以支持的浏览器必须对css3支持良好；

IE10+     谷歌     火狐Firefox(ff)     Safari     opera 。

官网

daneden.github.io/animate.css/

使用

1.引入需要的css库

<link rel="stylesheet" href="animate.min.css">

1.书写html，并且把需要做动画的元素添加上对应的类名(一共2个，其中第一个必须是animated，第二个是需要的动画效果类)

<div class="animated bounce" id=“box”></div>

动态添加

可以通过jquery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

也可以通过javaScript的setAttribute或className形式来实现。