CCS3動畫效果插件——Animae.css和WOW.js

CCS3動畫效果插件——Animae.css和WOW.js製作下拉和刷新活動的頁面,效果非常好,用法如下

基本用法

  1. 在頁面的 <head>中引入樣式文件:

    <head>
      <link rel="stylesheet" href="animate.min.css">
    </head>
    
  2. 給你想要添加動畫效果的元素加上 animated 樣式,如果想要動畫循環執行的話,你需要加上 infinite 樣式。

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

    當你將 animate.css 與 jQuery 一起使用或者添加你自己的 CSS 規則時, 你可以用 animate.css 做一大堆其他的事,使用 jQuery 動態添加動畫:

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

    你也可以檢測一個動畫是否結束了:

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

發佈了39 篇原創文章 · 獲贊 7 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章