前端動畫開源庫animate.css

阿新 • • 發佈：2019-01-27

Animate.css

1.簡介：一個跨瀏覽器的 css3 動畫庫，內建了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大縮小（等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。在炫酷的同時，還一直保持著易於使用的特點。

2. 官網：效果預覽

3.0 Installation（安裝）：

通過bower安裝：$ bower install animate.css --save

通過npm安裝：$ npm install animate.css --save

3.1 基本用法：

在文件的標題中包含樣式表，通過link標籤引入（下載方式可以通過下面cdn訪問複製原始碼）

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

3.2 cdn連結：

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

3.3 您可以生成該特定版本的SRI雜湊，然後使用它來確保檔案的完整性;您還可以通過設定相應的交叉路口屬性向CDN發出匿名請求：

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
</head>

3.4 將class動畫新增到您想要動畫的元素中。您可能還想要包括一個很多class用來以後使用

3.4.2 最後，您需要新增以下類：

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`

example:

<h1 class="animated infinite bounce">Example</h1>

4. 你可以用動畫來做很多其他的事情。當您將它與jQuery結合或新增您自己的CSS規則時。使用jQuery動態地新增動畫：

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

你還可以檢測到動畫的結束：

// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
  var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement('div'));

$('#yourElement').one(animationEnd, doSomething);

animate.css和jQuery結合教程：點選開啟連結（需要翻牆）

5. 您還可以擴充套件jQuery來新增一個功能，它可以為您完成所有工作：

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});

像這樣使用它：

$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});

你可以改變你的動畫的持續時間，新增一個延遲或者改變它播放的次數：

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意：其中vendor代表(webkit, moz)其中的一個

前端動畫開源庫animate.css

Animate.css 1.簡介：一個跨瀏覽器的 css3 動畫庫，內建了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大縮小（等多達 6

一個酷炫的button變化動畫開源庫原始碼分析—Android morph Button（一）

最近很是喜愛一些酷炫的動畫效果，特意在github上找了一些，看看他們是怎麼做到的，做個分析，順便可以對自定義控制元件和動畫有進一步的認識。先來看下這個庫中button的變化效果是什麼樣的：是不是很酷炫，而且中間的變化過程很舒服，沒

【android動畫開源庫】使用ObjectAnimator後按鈕等無法互動問題

在使用nineoldandroids的ObjectAnimator後發現按鈕無法互動了，去github的issue查了下，作者有提到android 3.0前的api只是渲染到了新的位置，實際位置並沒有發生改變，也就是說按鈕還是在原來的地方作者花了1天時間嘗試過3.0

Vue動畫--使用 animate.css庫

code： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用 animate.css庫</title> <script type

過渡與動畫（animate.css庫、動畫原理）

## 一、使用animate.css庫 ## Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫，如 Animate.css 在過渡鉤子函式中使用 J

css3動畫簡介以及動畫庫animate.css的使用

谷歌瀏覽器 ie瀏覽器 transition 工程師火狐瀏覽器在這個年代，你要是不懂一點點css3的知識，你都不好意思說你是個美工。美你妹啊，請叫我前端工程師好不好。呃。。好吧，攻城屍。。。呵呵，作為一個攻城屍，沒有點高端大氣上檔次的東西怎麽能行呢，那麽css3的動畫就絕

關於動畫Animate.css的使用方法

一個 mov git som log clas spa 版權 dem 　　首先貼個官網： https://daneden.github.io/animate.css/ 　　1、引入animate css文件 1 <head> 2

用wow.js實現頁面滾動時觸發animate.css動畫特效

偏移量 true fin 滾動 cdn lock src 代碼 splay 　　　　很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個

animate.css+wow.js頁面滾動即時顯示動畫

wow github gpo () ati sheet span div mobile 1、地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css"> <script

2017 年度最佳 JavaScript 和 CSS 開源庫推薦！

來源：開源最前線猿妹編譯連結：https://tutorialzine.com/2017/12/the-best-javascript-and-css-libraries-for-2017（點選尾部閱讀原文前往）前不久，Tutorialzine 整理出了

在Vue中使用 animate.css 庫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用 animate.css 庫</title> <

web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例

key cti 樣式描述 ans 轉換方法動畫效果 ansi order CSS動畫--頁面特效部分內容目前僅僅觀看了解內容,記錄簡單筆記，之後工作了進行內容的補充 7. CSS動畫--頁面特效 7.1 2D、3D轉換　　7.1.1 通過CSS3轉換，我們能夠對

常用---vue-cli中使用頁面切換庫vue-awesome-swiper以及動畫庫animate.css

vue-awesome-swiper以及animate.css使用安裝下載：npm install --save vue-awesome-swiper animate.css 檔案入口main.

vue動畫過渡效果以及 animate.css、velocity.js的基本使用

移入移出最基本動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

詳解animate.css動畫外掛用法

　　animate.css是一個以CSS3的animation製作的一個動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單，本文用來介紹該外掛如何使用。　　第一步：　　下載animate.css檔案，這個非常容易獲得，就不多說了。　　第二步：　　在你的HTML頁面中匯入這個檔案，

css3自定義動畫和animate.css 動畫

1、首先引入animate css檔案 <link rel="stylesheet" href="animate.min.css"> 2、給指定的元素加上指定的動畫樣式名 <div class="animated bounceOutLeft"></div

使用animate.css動畫外掛

1.提示:使用animate.css導航裡面的li或者a後面的線不能用border,用背景圖2.將animate.css在頭部連結上3.在animate.css官網上看看用什麼動畫和需用動畫的名字http://daneden.github.io/animate

fullpage.js結合animate.css實現滾屏動畫，詳細講解，附下載地址

fullpage.js結合animate.css實現滾屏動畫：【點選下載】----------------------------------------------------------------

動畫外掛—animate.css

1. 頁面引入外掛在你的index.html頁面中引入這兩個檔案 <link rel="stylesheet" href="lib/animate/animate.css"> <script src="lib/animate/wo

例項詳解css3動畫庫animate.css的各種動畫效果

animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所

前端動畫開源庫animate.css

Animate.css

2. 官網：效果預覽

相關推薦