css3動畫以及動畫庫animate.css的使用
作為一個(gè)攻城尸郑叠，沒有點(diǎn)高端大氣上檔次的東西怎么能行呢，那么css3的動畫就絕對是值得你擁有了明棍，雖說IE9以及更早版本的IE瀏覽器都不支持css3動畫更卒，但是IE6-8瀏覽器已是江河日下紧憾，使用谷歌瀏覽器、火狐瀏覽器、IE10+瀏覽器以及移動端瀏覽器等這些支持css3動畫的瀏覽器的人數(shù)越來越多散址，所以如果很簡單的就能讓一部分人獲得更好的用戶體驗(yàn)，那何樂而不為呢盾饮。
從廣義上來講裳瘪，css3動畫可以分為兩種：過渡動畫和關(guān)鍵幀動畫
第一種叫過渡（transition）動畫，就是從初始狀態(tài)過渡到結(jié)束狀態(tài)這個(gè)過程中所產(chǎn)生的動畫橙凳。所謂的狀態(tài)就是指大小蕾殴、位置、顏色岛啸、變形（transform）等等這些屬性钓觉。css過渡只能定義首和尾兩個(gè)狀態(tài)，所以是最簡單的一種動畫坚踩。
通過 CSS3荡灾，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
1.瀏覽器支持：Internet Explorer 10批幌、Firefox础锐、Chrome 以及 Opera 支持 transition 屬性
2.它如何工作？
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果荧缘。
要實(shí)現(xiàn)這一點(diǎn)皆警，必須規(guī)定兩項(xiàng)內(nèi)容：
-規(guī)定您希望把效果添加到哪個(gè) CSS 屬性上
-規(guī)定效果的時(shí)長
3.過渡屬性
要想使一個(gè)元素產(chǎn)生過渡動畫，首先要在這個(gè)元素上用transition屬性定義動畫的各種參數(shù)截粗∫可定義的參數(shù)有
transition-property：規(guī)定對哪個(gè)屬性進(jìn)行過渡
transition-duration：定義過渡的時(shí)間，默認(rèn)是0
transition-timing-function：定義過渡動畫的緩動效果桐愉，如淡入财破、淡出等，默認(rèn)是 ease
transition-delay：規(guī)定過渡效果的延遲時(shí)間从诲，即在過了這個(gè)時(shí)間后才開始動畫左痢，默認(rèn)是0
div{
transition-property:width;/* 過渡名稱 */
transition-duration:2s;/* 過渡時(shí)間 */
transition-timing-function:ease;/* 過渡時(shí)間曲線 */
transition-delay:2s; /* 過渡延遲2s */
}
為了書寫方便，也可以把這四個(gè)屬性按照以上順序簡寫在一個(gè) transition 屬性
div{
transition: width 2s ease,background 1s linear;/*簡寫屬性*/
}
如果是使用屬性的默認(rèn)值系洛，則可以省略：
div{transition: width 2s} 相當(dāng)于 div{transition: width 2s ease 0}
如果想要同時(shí)過渡多個(gè)屬性俊性，可以用逗號隔開，如：
div{transition: width 2s,height 2s,background 2s;}
使用transtion屬性只是規(guī)定了要如何去過渡描扯，要想讓動畫發(fā)生定页，還得要有元素狀態(tài)的改變。如何改變元素狀態(tài)呢绽诚，當(dāng)然就是在css中給這個(gè)元素定義一個(gè)類（:hover等偽類也可以）典徊，這個(gè)類描述的是過渡動畫結(jié)束時(shí)元素的狀態(tài)。
除了使用hover等系統(tǒng)提供的偽類外恩够，我們也可以隨意的定義自己的類卒落，然后想要過渡時(shí)就通過js把類加到元素上面
第二種叫做關(guān)鍵幀（keyframes）動畫。不同于第一種的過渡動畫只能定義首尾兩個(gè)狀態(tài)蜂桶，關(guān)鍵幀動畫可以定義多個(gè)狀態(tài)儡毕，或者用關(guān)鍵幀來說的話，過渡動畫只能定義第一幀和最后一幀這兩個(gè)關(guān)鍵幀扑媚，而關(guān)鍵幀動畫則可以定義任意多的關(guān)鍵幀腰湾，因而能實(shí)現(xiàn)更復(fù)雜的動畫效果。
關(guān)鍵幀動畫的定義方式也比較特殊疆股，它使用了一個(gè)關(guān)鍵字 @keyframes 來定義動畫费坊。具體格式為：
@keyframes 動畫名稱{
時(shí)間點(diǎn) {元素狀態(tài)}
時(shí)間點(diǎn) {元素狀態(tài)}
}
例如：
@keyframes demo{
0% {background: red; width:100px;}
10% {background: green; width:120px;}
40% {background: blue; width:140px;}
70%{background: orange; width:160px;}
100%{background: yellow; width:180px;}
}
這段代碼定義了一個(gè)名為demo,且有5個(gè)關(guān)鍵幀的動畫。0% 押桃，10% 等這些表示的是時(shí)間點(diǎn)葵萎，是相對于整個(gè)動畫的持續(xù)時(shí)間來說的，時(shí)間點(diǎn)之后的花括號里則是元素的狀態(tài)屬性集合唱凯，描述了這個(gè)元素在這個(gè)時(shí)間點(diǎn)的狀態(tài)羡忘，動畫發(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)鍵幀是必須要定義的漫雕。
現(xiàn)在我們知道了怎么去定義一個(gè)關(guān)鍵幀動畫了，那怎么去實(shí)現(xiàn)這個(gè)動畫呢峰鄙？其實(shí)很簡單浸间，只要把這個(gè)動畫綁定到某個(gè)要進(jìn)行動畫的元素上就行了。
把動畫綁定到元素上吟榴，我們可以使用animation屬性魁蒜。animation屬性有以下這些：
animation-name 規(guī)定@keyframes動畫的名稱
animation-duration 規(guī)定動畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是0.
animation-timing-function 規(guī)定動畫的速度曲線吩翻。默認(rèn)是“ease”兜看。
animation-delay規(guī)定動畫何時(shí)開始
animation-iteration-count規(guī)定動畫被播放的次數(shù)。默認(rèn)是1狭瞎。
animation-direction規(guī)定動畫是否在下一周期逆向地播放细移。 默認(rèn)是“normal”。
animation-play-state規(guī)定動畫是否正在運(yùn)行或暫停熊锭。默認(rèn)是“running”弧轧。
animation-fill-mode規(guī)定對象動畫時(shí)間之外的狀態(tài)。
像前面講的transition屬性一樣碗殷，也可以把這些animation屬性簡寫到一個(gè)animation中劣针，使用默認(rèn)值的也可以省略掉。但 animation-play-state 屬性不能簡寫到animation中亿扁。
div{
animation: demo 5s;
}
只要像這樣把定義好的動畫綁定到元素上捺典，就能實(shí)現(xiàn)關(guān)鍵幀動畫了，而不是像第一種過渡動畫那樣从祝，需要一個(gè)狀態(tài)的改變才能觸發(fā)動畫襟己。
注意，為了達(dá)到最佳的瀏覽器兼容效果牍陌，在實(shí)際書寫代碼的時(shí)候擎浴，還必須加上各大瀏覽器的私有前綴
animate.css是一個(gè)使用CSS3的animation制作的動畫效果的CSS集合，里面預(yù)設(shè)了很多種常用的動畫毒涧，且使用非常簡單贮预。下面我給大家介紹一下animate.css的使用
引入animate.css很容易，有以下幾種方法
1.從官網(wǎng)下載
https://raw.github.com/daneden/animate.css/master/animate.css
2.通過npm安裝
$ npm install animate.css
3.使用在線cdn
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
https://unpkg.com/animate.css@3.5.2/animate.min.css
animate.css的使用非常簡單，因?yàn)樗前巡煌膭赢嫿壎ǖ搅瞬煌念惱锓峦蹋韵胍褂媚姆N動畫滑频，只需要把通用類animated和相應(yīng)的類添加到元素上就行了。
至于動畫的配置參數(shù)唤冈，比如動畫持續(xù)時(shí)間峡迷，動畫的執(zhí)行次數(shù)等等，你可以在你的的元素上自行定義你虹，覆蓋掉animate.css里面所定義的就行了绘搞。
animate.css里面的類，主要包括Attention(晃動效果)傅物、bounce(彈性緩沖效果)夯辖、fade(透明度變化效果)、flip(翻轉(zhuǎn)效果)董饰、rotate(旋轉(zhuǎn)效果)楼雹、slide(滑動效果)、zoom(變焦效果)尖阔、special(特殊效果)這8類贮缅。
https://daneden.github.io/animate.css/
1.https://www.html5tricks.com/
https://www.html5tricks.com/demo/html5-canvas-elasticity-text/index.html（P8）
https://www.html5tricks.com/demo/css3-map-hot-area/index.html(P10地圖熱點(diǎn))
https://www.html5tricks.com/demo/jquery-hoverex/index.html
https://www.html5tricks.com/demo/css3-3d-image-rotate/index.html（P31鼠標(biāo)移入圖片效果）
2.十二個(gè)創(chuàng)新的網(wǎng)頁界面交互和動畫效果http://www.yyyweb.com/3470.html
3.http://www.17sucai.com/
4.html5 svg線條動態(tài)繪制iphone邊框動畫效果演示http://www.htmleaf.com/Demo/20141009101.html
5.Canvas下雪效果實(shí)現(xiàn)https://www.deanhan.cn/canvas-snow.html
