1、animation動(dòng)畫簡(jiǎn)介

animation實(shí)現(xiàn)動(dòng)畫由倆個(gè)部分組成，通過(guò)類似flash動(dòng)畫的關(guān)鍵幀來(lái)申明一個(gè)動(dòng)畫，在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫實(shí)現(xiàn)一個(gè)更為復(fù)雜的動(dòng)畫效果

關(guān)鍵幀 例如：

調(diào)用關(guān)鍵幀：

語(yǔ)法 animation:animation-name?animation-duration?animation-timing-function??animation-delay?animation-iteration-count animation-direction

animation-name 由?@keyframes 創(chuàng)建的動(dòng)畫名稱

animation-duration過(guò)渡時(shí)間

animation-timing-function過(guò)渡方式

animation-delay延遲時(shí)間

animation-iteration-count 動(dòng)畫的播放次數(shù) 通常值為1次 特殊值infinite為無(wú)限播放

animation-direction動(dòng)畫的播放方向，alternate為偶數(shù)次向前播放，normal動(dòng)畫每次都是循環(huán)向前播放

練習(xí)如下：

該圖形的變化從左上角到右上角來(lái)回跳動(dòng)的一個(gè)過(guò)程

linear ?規(guī)定以相同速度開始至結(jié)束的過(guò)渡效果

ease ?規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果（默認(rèn)值）

ease-in 規(guī)定以慢速開始的過(guò)渡效果

ease-out ?規(guī)定以慢速結(jié)束的過(guò)渡效果

ease-in-out 規(guī)定以慢速開始和結(jié)束的過(guò)渡效果

2、3D動(dòng)畫

?perspective:500px;透視 也可以理解為視距，可以理解為 你的眼睛距離物體的距離 ?距離物體越近 物體就越大，距離物體越遠(yuǎn) 物體就越小

transform: rotateZ(30deg)?rotateZ是繞著z軸旋轉(zhuǎn) 正值是順時(shí)針旋轉(zhuǎn) 負(fù)值是逆時(shí)針旋轉(zhuǎn)

transform: rotateY(30deg) rotateY是繞著y軸旋轉(zhuǎn)?正值是向里面旋轉(zhuǎn) 負(fù)值是向外面旋轉(zhuǎn)

transform: rotateX(30deg)rotateX是繞著x軸旋轉(zhuǎn)?正值是向里面旋轉(zhuǎn)?負(fù)值是向外面旋轉(zhuǎn)

transform: rotate(30deg)參數(shù)a取正值時(shí)元素相對(duì)原來(lái)中心順時(shí)針旋轉(zhuǎn)

?transform: translate3d(0, 0, 200px);效果如下:

?translate3d(0,0,200px) 表示z軸向前移動(dòng)二樓200px（近大遠(yuǎn)小的原理）

?translate3d 里面分別表示x軸距離 y軸距離 和z軸距離

?要想實(shí)現(xiàn)3d效果必須要在父元素上加上一個(gè)屬性perspective

3、transform-style:

如果想讓子元素有3d的效果 必須要給父元素設(shè)置transform-style，默認(rèn)值是flat，?想變成3d效果要把值設(shè)置成preserve-3d

也可以?設(shè)置旋轉(zhuǎn)后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right