Animate.css 一款強大css3動畫庫

發布時間：2016-06-25 14:15:46 作者：admin 瀏覽：2273 熱度：0 收藏：

Animete.css

插件描述：Animate.css內置了很多典型的css3動畫，兼容性好使用方便。

Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在項目中引用。

用法

1、首先引入animate css文件

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

2、給指定的元素加上指定的動畫樣式名

<div class="animated bounceOutLeft"></div>

這里包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實現的元素都得添加這個。第二個是指定的動畫樣式名。

3、如果說想給某個元素動態添加動畫樣式，可以通過jquery來實現：

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

4、當動畫效果執行完成后還可以通過以下代碼添加事件

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

5、所有的動畫樣式名請參見demo頁面。