動畫庫animate.css的用法

簡介

animate.css是一個來自國外的 CSS3 動畫庫，它預設了引發彈跳（bounce）、搖擺（swing）、顫抖（wobble）、抖動（shake）、閃爍（flash）、翻轉（flip）、旋轉（rotate）、淡入淡出（fade）、滑動（Sliding）、光速（lightspeed）、縮放變焦（Zoom）、翻滾（roll）等多達 70 多種動畫效果，藉助 animate.css 可以很方便、快速的製做 常見的動畫效果。固然animate.css只兼容支持 CSS3 animate 屬性的瀏覽器，他們分別是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

一、引入文件
<link rel="stylesheet" href="animate.min.css">


二、在html中調用
<h1 class="animated bounceOut">Animate.css</h1>
給元素加上class屬性，animated是必須加的，bounceOut是動畫效果的名稱。


也能夠使原生JS或得Jquery動態添加使用動畫,只要在須要動畫的元素的class上加對應的動畫名稱便可，好比

$(function(){
    $('#jqhtml').addClass('animated bounce');
});

animate.css 的默認設置也許有些時候並非咱們想要的，因此你能夠從新設置，好比：

#jqhtml{
    animate-duration: 2s;    //動畫持續時間
    animate-delay: 1s;    //動畫延遲時間
    animate-iteration-count: 2;    //動畫執行次數
}

在線演示

示例

如下是前端庫爲你們收集的特效
66種基於animate.css的CSS消息提示動畫效果
基於magnific-popup.js和animate.css的響應式lightbox特效
基於Animate.css的炫酷jQuery消息通知框插件
SVG文字動畫特效插件AnimatedLetters
基於Animate.css的jQuery全屏幻燈片插件

下載地址

http://www.jqhtml.com/910.html