動畫庫animate.css的用法

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/w178191520/article/details/78847536

簡介

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。

使用方法

1、引入檔案

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

2、在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