CSS3动画animation认识和Animate.css的使用
CSS動畫可以取代js動畫 在移動端會更加流暢！
下面是一個的繪制太陽系各大行星運行軌跡筆記，可以自學參考！
首先我們需要創建一個@keyframes規則
@keyframes name{from{width:1px}to{width:100px} } //或者使用百分比 @keyframes name{0%{width:1px}100{width:100px} }創建好之后，我們需要在css選擇器里引用我們寫的規則，
<div class="box1"></div>.box1{width: 0px;height: 100px;background-color: #00FF7F;/* 引用 / 捆綁*/animation: first 2s;} @keyframes first{0%{width:1px}100{width:100px}}效果圖：
當然我們除了改變寬度width 還可以改變其他的屬性：height、定位、移動、旋轉、縮放等你所能想到的css屬性
css3動畫屬性非常多，我感覺常用的是animation的簡寫形式和一個動畫周期需要花費的時間animation-duration;
以下也是一個小的實例：
<div class="horse"></div> html, body {height: 100%; }.horse {width: 128px;height: 128px;background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;background-size: 100% 100%;transform: scaleX(-1);animation: bounce 0.1s infinite; }@keyframes runhorse {0% {transform: translate(0, 0);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}25% {transform: translate(calc(100vw - 128px), 10px) scaleY(-1);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}50% {transform: translate(calc(100vw - 129px), calc(100vh - 200px));animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}75% {transform: translate(0, calc(100vh - 128px)) scaleX(-1);}100% {transform: translate(10px, 10px) translate3d(0, -4px, 0);} }body:hover .horse {animation: runhorse 2s linear infinite; }效果圖：
沒考慮小馬的頭的方向，只是寫了旋轉的效果，很多css屬性都可以用到動畫效果里。可以參考~
推薦使用animate.css
①下載 animate.css
官方地址：animate.css
②或者
直接進入animate.css 隨后右鍵另存為即可使用
③ 直接在頁面頂部head標簽通過link引入
基本模板如下：
效果如下：
接下來，就是對animate.css運動的一個小總結，雖然不多，但是歸類后方便后面查找！
/按官網順序/
①Attention seekers
- bounce 輕輕跳躍一下（彈跳；彈起，反跳；彈回）
- flash 閃爍兩次（使閃光；反射）
- pulse 慢慢放大，然后回縮（跳動，脈跳）
- shake 左右輕晃幾次
- swing 以中間頂部為中心小幅度晃動
- tada 很調皮的一個小晃動，ps：只能這么描述了
- wobble 大幅晃動，地動山搖
②Bouncing Entrances
- bounceIn 正中央，從無到有，輕輕抖動幾次
- bounceInDown 從右側進來，無到有，輕輕抖動幾次
- bounceInLeft 雷同，但是一定要注意大小寫“專業點叫駝峰式”
- bounceInRighr
- bounceInUp
- bouncing Exits
- bounceOut 正中央，從有到無，輕輕抖動幾次消失
- bounceOutDown
- bounceOutLeft
- bounceOutRighr
- bounceOutUp
③Fading Entrances
- fadeIn 跟上面bounceIn還是有些區別的，畢竟不抖
- fadeInDown 逐漸從上面down下來
- fadeInDownBig逐漸從上面down下來，但是跟上面那位有稍微區別，加了big后起始位置是從設備外進來的
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightNig
- fadeInUp
- fadeInUpBig 用up測試下big吧
- fading Exits
- fadeOut 恰與fadeIn相反
- fadeOutDown 逐漸從上面down下去消失，你確定不玩玩big了？
- fadeOutDownBig逐漸從上面down下去，但是跟上面那位有稍微區別，加了big后終點位置是從設備外
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightNig
- fadeOutUp
- fadeOutUpBig
以下這些都是常用的
④Flippers
- flip 一個夸張的放大飯莊縮小效果
- flipInX 沿中心水平軸小幅度反轉出來
- FlipInY 沿中心豎直軸小幅度反轉出來
- flipOutX 沿中心水平軸小幅度反轉消失
- FlipOutY 沿中心豎直軸小幅度反轉消失
⑤Lightspeed
- lightSpeedIn 字面意思就是光速出來嘍，記得調快速度哦，什么，怎么調速我沒說么？好吧，先留個坑，待會兒補。
- lightSpeedOut 光速消失
⑥Rotating Entrances
- rotateIn 準確說是以正中心點180度旋轉漸顯
- rotateInDownLeft 沒錯，就是以左上角為中心點轉下來
- rotateInDownRight 就是以右上角為中心點轉下來
- rotateInUpLeft 就是以左上角為中心點轉上去
- rotateInUpRight 就是以右上角為中心點轉上去
- rotating Exits
- rotateOut 準確說是以正中心點180度旋轉漸隱
- rotateOut DownLeft
- rotateOut DownRight
- rotateOut UpLeft
- rotateOut UpRight
⑦Sliding Entrances
- slideInUp 這個slide感覺就有點雞肋了，有了上邊的Lightspeed、fadeIn，就會看出這個的弊端，動作幅度太小
- slideInDown
- slideInLeft
- slideInRight
- sliding Exits
- slideOutUp 表現依舊不好
- slideOutDown
- slideOutLeft
- slideOutRight
⑧Zoom Entrances
- zoomIn 牢記哦，正中央出來的，做效果是最棒了
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoom Exits
- zoomOut 牢記哦，正中央消失的，配合上面的zoomIn做效果是最棒了
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
⑨Specials
- hinge 懸掛，顫抖，掉下去
- rollIn 從左側旋轉進入
- rollOut 向右側旋轉消失
到此呢，整個animate.css里的所有動作效果規整完畢。回上邊去填坑！！
算了，還是在這里填吧，若想用到延時加載和控制運動過渡時間，就必須要用到jquery了，所以我們先去找個jq引入到頁面底部
Demo如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="css/animate.css" /> <style type="text/css"> .test{ position: absolute; width: 100px; font-size: 50px; top: 50px; left: 50%; margin-left: -50px; } </style> </head> <body> <div class="animated rollIn test">test</div> <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $('.test').css({'animation-duration':'.3s','animation-delay':'3s'}) }) </script> </body> </html>使用jq來重定義css樣式，這種方法其實違背了animate簡化運動代碼的初衷！
css3動畫和animate.css動畫庫使用
CSS3動畫
css3動畫可以分為兩種。transition過渡動畫和keyframes關鍵幀動畫
過渡動畫
第一種叫過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。所謂的狀態就是指大小、位置、顏色、變形（transform）等等這些屬性。css過渡只能定義首和尾兩個狀態，所以是最簡單的一種動畫。
要想使一個元素產生過渡動畫，首先要在這個元素上用transition屬性定義動畫的各種參數。可定義的參數有
transition-property：規定對哪個屬性進行過渡
transition-duration：定義過渡的時間，默認是0
transition-timing-function：定義過渡動畫的緩動效果，如淡入、淡出等，默認是 ease
transition-delay：規定過渡效果的延遲時間，即在過了這個時間后才開始動畫，默認是0
為了書寫方便，也可以把這四個屬性按照以上順序簡寫在一個 transition 屬性上：
如果是使屬性的默認值，則可以省略：
相當于：
如果想要同時過渡多個屬性，可以用逗號隔開，如：
使用transtion屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，當然就是在css中給這個元素定義一個類（:hover等偽類也可以），這個類描述的是過渡動畫結束時元素的狀態。
這樣，當我們把鼠標移動到div上的時候，div的狀態發生了變化，就能看到寬度從100到400，高度從100到400，背景顏色從黑到紅的，過渡時間為3秒的過渡效果了。
除了使用hover等系統提供的偽類外，我們也可以隨意的定義自己的類，然后想要過渡時就通過js把類加到元素上面：
關鍵幀動畫
第二種叫做關鍵幀（keyframes）動畫。不同于第一種的過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀來說的話，過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。
關鍵幀動畫的定義方式也比較特殊，它使用了一個關鍵字 @keyframes 來定義動畫。具體格式為：
@keyframes 動畫名稱{時間點 {元素狀態}時間點 {元素狀態}… }例如：
這段代碼定義了一個名為demo,且有5個關鍵幀的動畫。0% ，10% 等這些表示的是時間點，是相對于整個動畫的持續時間來說的，時間點之后的花括號里則是元素的狀態屬性集合，描述了這個元素在這個時間點的狀態，動畫發生時，就是從第一個狀態到第二個狀態進行過渡，然后從第二個狀態到第三個狀態進行過渡，直到最后一個狀態。一般來說，0%和100%這兩個關鍵幀是必須要定義的。
關鍵幀的書寫方式很靈活，一行可以寫多個關鍵幀。
甚至它們之間的空格也是可以不要的。
現在我們知道了怎么去定義一個關鍵幀動畫了，那怎么去實現這個動畫呢？其實很簡單，只要把這個動畫綁定到某個要進行動畫的元素上就行了。
把動畫綁定到元素上，我們可以使用animation屬性。animation屬性有以下這些：
像前面講的transition屬性一樣，也可以把這些animation屬性簡寫到一個animation中，使用默認值的也可以省略掉。但 animation-play-state 屬性不能簡寫到animation中。
只要像這樣把定義好的動畫綁定到元素上，就能實現關鍵幀動畫了，而不是像第一種過渡動畫那樣，需要一個狀態的改變才能觸發動畫。
注意，為了達到最佳的瀏覽器兼容效果，在實際書寫代碼的時候，還必須加上各大瀏覽器的私有前綴
animate.css的使用
1.html版本
animate.css是一個css3動畫庫，可以到github上去下載，里面預設了很多種常用的動畫，使用也很簡單，因為它是把不同的動畫綁定到了不同的類里，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了：
首先在head中引入下載的animate.css文件
然后你想要哪個元素進行動畫，就給那個元素添加上animated類 以及特定的動畫類名，animated是每個要進行動畫的元素都必須要添加的類。
假設使用jquery，要給一個id為demo的元素添加一個搖動的動畫,因為搖動的動畫類名為shake，所以代碼是這樣的：
這樣載入頁面，元素就能動起來了。你也可以在動畫完成后，把動畫類移除，以便可以再次進行同一個動畫。
至于動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，你可以在你的的元素上自行定義，覆蓋掉animate.css里面所定義的就行了。
注意這些屬性還要記得加上各瀏覽器的前綴。
總之是很靈活的，說到底不就是一個css文件嗎，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的類名，就在里面改掉就行了。如果你只想用里面的部分動畫，也可以把那些要使用的動畫分離出來，它的官網也提供了這樣的功能。
2.vue版本
1.安裝animate.css
npm install animate.css --save安裝2.引入
方式1 在style中引入(加了scoped只在當前組件使用，沒有加則全局可用)
<style lang="scss" scoped> @import 'animate.css';</style>方式2 在main.js全局引入（全局可用）
import 'animate.css'方式3在script引入（全局可用）
<script> import Header from '../components/common/Header' import 'animate.css' export default { } </script>3.添加樣式 必須添加animated類 +想要動畫效果
<h3 class="animated bounceInUp" v-if="flag">彈跳進入，彈跳出去效果</h3>4.想要更好效果可用vue自帶的transition包裹組件
在進入/離開的過渡中，會有 6 個 class 切換。
完整例子
<template><section class="home"><v-header></v-header><div>主頁</div><input type="button" value="顯示/隱藏" @click="flag=!flag" :duration="2000"><transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown"><h3 v-if="flag">彈跳進入，彈跳出去效果</h3><!--通過一個標識符，然后可以不停將轉換true/false，達到隱藏顯示的目的--></transition></section> </template><script> import Header from '../components/common/Header' export default {name:'home',components:{'v-header':Header},data(){return{flag:false}} } </script><style lang="scss" scoped> @import 'animate.css'; </style>總結
以上是生活随笔為你收集整理的CSS3动画animation认识和Animate.css的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jenkins从下载到部署项目的流程
- 下一篇： CSS 样式修改技巧及心得汇总