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