animate.css動畫庫的使用

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

`animate.css`介紹

內建了許多的CSS3動畫，相容性很好。

用法：

如：
添加了animated、bouce類

<head>
    <link rel="stylesheet" href="animate.css">
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 10px auto;
        }
        .item 
 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item animated bounce"></div>
    </div>
</body>

這裡寫圖片描述

效果：
紅色方塊上下晃動幾下後停止。

效果展示：

點選下面的連結可以檢視animate.css中每個類的效果。

下面將列舉每個類：

類名：

special

bouce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
hinge
jackInTheBox

bounce

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut

bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

fade

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

light

lightSpeedIn
lightSpeedOut

rotate

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

roll、zoom

rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

slide

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
slideOutUp

flip

flip
flipInX
flipInY
flipOutX
flipOutY

animate.css動畫庫的使用

animate.css介紹內建了許多的CSS3動畫，相容性很好。用法：如：添加了animated、bouce類 <head> <link rel="stylesheet" href="animate.cs

Animate.css動畫庫，簡單的使用，以及原始碼剖析

專案演練地址推薦的線上文件社群-MDN css線上手冊包含css3 animate.css是什麼？能做些什麼？ animate.css是一個css動畫庫，使用它可以很方便的快捷的實現，我們想要的動畫效果，而省去了操作js的麻煩。同時呢，它也是一個開源的庫，在GitHub的點贊高達5萬以上。功能非常強大

一款非常好用的css動畫庫--animate.css

今天再學習vue.js的時候看到了一個不錯的css庫，vue官方推薦（不一定要使用vue.js才能使用這個css庫），這個庫叫做animate.css，是個動畫效果的css庫，有好多不錯的動畫效果。首先看怎麼引用，然後是在實際專案中的使用： <

Vue專案中使用Animate.cssdonghu動畫庫

#在HTML中怎樣使用 1.<link rel="stylesheet" href="js/animate.css"> <transition enter-active-class='animated bounce' leave-active-cla

常見 CSS 動畫庫

自從 CSS3 有了動畫功能，從此 Web 頁面就邁進“忽如一夜春風來，千頁萬頁動畫開”的盛況。所以 CSS 動畫除了是炫技之選更是一項基本技能，當然也就有無數前輩為之嘔心瀝血總結經驗了。這裡我們站在巨人肩上，為大家推薦一些常見且十分好用的 CSS 動畫庫，既可以用來學習也

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

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

Animate.css(一款有意思的CSS3動畫庫)

element 自己的 spa 使用來替 amp example 持續時間 css 官網：https://daneden.github.io/animate.css/ animate.css 是一款跨瀏覽器的動畫庫。使用方式：在頁面的 <head>中引

Animate.css 一款強大的預設css3動畫庫

strong pan utl css3動畫 clas min 指定想要 del Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在項目中引用。用法 1、首先引入animate css文件 <head> <link rel=

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

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

animate.css高大上的CSS3動畫庫

Animate.css是一款相容多款瀏覽器的CSS3動畫庫，使用方便，效果絢麗。 Animate.css的相容性 Animate.css的用法下載Animate.css 官網的github上animate.css的宣傳口號： A

強大而酷炫的CSS3動畫庫Animate.css使用方法

今天介紹一個強大的CSS3庫 Animate.css 庫如其名，是一個動畫庫通過它我們非常輕鬆地新增動畫效果 “Just-add-water CSS animations” 像灌水一樣簡單我們只需要新增幾個類名下載地址及動畫效果戳這裡：An

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

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

Animate.css 一款強大的預設動畫庫

Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在專案中引用。 http://www.jq22.com/yanshi819 樣式名演示效果用法 1、首先引入animate css檔案 1 2 3 <head>

Animate.css 使用教程（一個強大的 CSS3 動畫庫）

前言 animate.css 是一個有趣，酷炫的，跨瀏覽器的動畫庫，你可以將它用於你的專案中。不管是主頁，滑動切換，又或者是其它方面，你都可以通過它來製作出驚人的效果。基本用法引入CSS檔案這個對你來說應該再容易不過了，我相信你可能也已經對引入外部的CSS樣式檔

Animate.css的使用方法，一個前端動畫庫

這個css動畫庫包含了抖動、閃爍、彈跳、翻轉、旋轉、淡入淡出等多達 60 多種動畫效果，這些效果能滿足前端的日常需要，而且你也可以

vue中動畫關鍵幀keyframes 和 animation 和animate動畫庫

（1） <style> @keyframes fontScale { 0% { font-size: 30px; } 100% { font-size: 50px; } }

使用 Facebook開源動畫庫 POP 實現真實衰減動畫

tran rect mov rec efault gin calayer uibutton height 1. POP動畫基於底層刷新原理。是基於CADisplayLink,1秒鐘運行60秒，接近於遊戲開發引擎 @interface Vie

Facebook Rebound 彈性動畫庫源碼分析

管理介紹 doc 結束 ace animation ont system main Rebound源碼分析讓動畫不再僵硬：Facebook Rebound Android動畫庫介紹一文中介紹了rebound這個庫。對於想體驗一下rebound的效果，又懶得clone和

Rebound-Android的彈簧動畫庫

ask 之前 att rep 下載地址創建 tabbar fig 重復簡介官方網站 github Rebound是facebook出品的一個彈簧動畫庫，與之對應的iOS版本有一個pop動畫庫，也是非常的強大給力。Facebook真是互聯網企業中的楷模，開源了很多的實用

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

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

animate.css動畫庫的使用

animate.css介紹

用法：

效果展示：

類名：

special

bounce

fade

light

rotate

roll、zoom

slide

flip

相關推薦

`animate.css`介紹