animation簡(jiǎn)介
? animation無疑是CSS3里最牛的功能。可以采用較少的代碼制作超炫的動(dòng)畫。
? animation制作動(dòng)畫的原理類似與flash，采用關(guān)鍵幀的概念。
? animation可以說是transition的功能加強(qiáng)版，可以控制的更細(xì)膩。transition
? Transition是實(shí)現(xiàn)過渡效果的CSS3屬性，從視覺效果上觀察Transition可讓HTML元素實(shí)現(xiàn)動(dòng)態(tài)效果形成一個(gè)簡(jiǎn)單的動(dòng)畫。
? Transition屬性中也有很多和animation相似的地方。Transition復(fù)習(xí)
? transition-property(規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。)
? transition-duration(規(guī)定完成過渡效果需要多少秒或毫秒。)
? transition-timing-function(規(guī)定速度效果的速度曲線。)
? transition-delay(規(guī)定過度效果的延遲。)Animation中的屬性
? animation-name(動(dòng)畫命名)
? animation-duration(動(dòng)畫持續(xù)時(shí)間)
? animation-timing-function(動(dòng)畫速度曲線)
? animation-iteration-count(動(dòng)畫播放次數(shù))
? animation-direction(完成一次動(dòng)畫后的運(yùn)行方式)
? animation-play-state(控制動(dòng)畫的播放狀態(tài))
? animation-fill-mode(規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見)Transition與Animation的區(qū)別
? transition是過渡效果，animation是動(dòng)畫。
? transition只能指定起始狀態(tài)和結(jié)束狀態(tài)的動(dòng)畫效果, animation可以有多個(gè)關(guān)鍵幀設(shè)置實(shí)現(xiàn)更加豐富的動(dòng)畫效果。
? transition需要有動(dòng)作(hover等)來觸發(fā)才能執(zhí)行，animation可以自己執(zhí)行。
? 兩者支持的屬性不同，animation多出iteration-count, direction,play-state等屬性，增加可控性。animation-name
? animation-name: keyframename|none;
? 為 @keyframes 動(dòng)畫規(guī)定一個(gè)名稱。
? none為默認(rèn)值，既沒有動(dòng)畫效果。animation-duration
? animation-duration: time;
? 定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。animation-timing-function
? animation-timing-function: value;
? 規(guī)定動(dòng)畫的速度曲線。
? linear：動(dòng)畫從頭到尾的速度是相同的。
? ease：默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
? ease-in：動(dòng)畫以低速開始。
? ease-out：動(dòng)畫以低速結(jié)束。
? ease-in-out：動(dòng)畫以低速開始和結(jié)束。animation-delay
? animation-delay: time;
? 定義動(dòng)畫的開始時(shí)間（延遲時(shí)間）。
? time取值為秒或毫秒計(jì)，默認(rèn)值是 0。animation-iteration-count
? animation-iteration-count: n|infinite;
? 指定元素播放動(dòng)畫的循環(huán)次數(shù)。
? n:定義動(dòng)畫播放次數(shù)的數(shù)值。
? infinite:規(guī)定動(dòng)畫應(yīng)該無限次播放。animation-direction
? animation-direction: normal|alternate;
? 定義是否應(yīng)該輪流反向播放動(dòng)畫。
? normal：默認(rèn)值。動(dòng)畫應(yīng)該正常播放。
? alternate：動(dòng)畫輪流反向播放。animation-play-state
? animation-play-state: paused|running;
? 屬性規(guī)定動(dòng)畫正在運(yùn)行還是暫停。
? paused可以讓動(dòng)畫暫定播放，running可以讓動(dòng)畫繼續(xù)播放。animation-fill-mode
? animation-fill-mode:none|forwards|backwards|both;
? 規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。
? none :在應(yīng)用動(dòng)畫時(shí),在經(jīng)過延時(shí)時(shí)間后執(zhí)行動(dòng)畫之前及動(dòng)畫結(jié)束后，使元素呈現(xiàn)默認(rèn)狀態(tài)。
? forwards:表示動(dòng)畫結(jié)束后,元素就是當(dāng)前動(dòng)畫結(jié)束時(shí)候的狀態(tài)。
? backwards:表示動(dòng)畫開始之前,元素處于keyframe是"from"或"0%"關(guān)鍵幀的狀態(tài)。
? both:forwards + backwardsKeyframes
? 關(guān)鍵幀由”@keyframes”開頭，后面緊跟”動(dòng)畫名稱”和{}。花括號(hào)中就是一些不同時(shí)間段的樣式規(guī)則。
? “@keyframes”中的樣式由多個(gè)百分比構(gòu)成，在“0%” 到“100%”中間，可以創(chuàng)建多個(gè)百分比。這個(gè)百分比即在動(dòng)畫過程中的關(guān)鍵幀位置。
? 每一個(gè)百分比中都要給動(dòng)畫效果元素加上不同的屬性，從而讓元素在一種不斷變化的狀態(tài)。
? 我們可以使用”from””to”來代表一個(gè)動(dòng)畫的開始和結(jié)束幀位置。
? 當(dāng)使用百分比表示起始幀時(shí)，使用“0%”，不能去掉百分號(hào)。keyframes只接受百分比數(shù)值。@keyframes寫法
? @keyframes Name {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}@keyframes寫法
? @-webkit-keyframes Name {
0% { Properties:Properties value; }
Percentage { Properties:Properties value; }
100% { Properties:Properties value; }
}Animation實(shí)例
? @-webkit-keyframes box1 {
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}調(diào)用animation的方法
? .box1 { width: 50px; height: 50px; margin-left: 100px; background: blue;
-webkit-animation-name:'box1';/動(dòng)畫屬性名/
-webkit-animation-duration: 5s;/動(dòng)畫持續(xù)時(shí)間/
-webkit-animation-timing-function: ease-in-out; /動(dòng)畫頻率/
19 .調(diào)用animation的方法
-webkit-animation-delay: 2s;/動(dòng)畫延遲時(shí)間/
-webkit-animation-iteration-count: 10;/定義循環(huán)資料，infinite為無限次/
-webkit-animation-direction: alternate;/定義動(dòng)畫循環(huán)方式/
}
3D動(dòng)畫
動(dòng)畫的基本編寫方式已經(jīng)介紹完了，相信一些簡(jiǎn)單的2d動(dòng)畫已經(jīng)難不倒大家了接下來咱們看看更加酷炫的3d動(dòng)畫是如何編寫的呢？
CSS3transform改變，使…變形
transform
? transform的含義是：改變，使…變形；轉(zhuǎn)換。
? transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotateX() 和 rotateY() ，以此類推。rotate
? 含義：旋轉(zhuǎn)；
? 如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。其中“deg”是“度”的意思，如“10deg”表示“10度”。
? 例: transform:rotate(30deg)transform-origin
? 含義：旋轉(zhuǎn)的基點(diǎn)。
? 該屬性提供2個(gè)參數(shù)值，第一個(gè)用于橫坐標(biāo)，第二個(gè)用于縱坐標(biāo)；如果只提供一個(gè)，該值將用于橫坐標(biāo)，縱坐標(biāo)將默認(rèn)為50%。
? percentage：用百分比指定坐標(biāo)值。可以為負(fù)值。
? length：用長(zhǎng)度值指定坐標(biāo)值。可以為負(fù)值。
? left center right是水平方向取值，而top center bottom是垂直方向的取值。translate
? 含義：變動(dòng)，位移；
? 二維坐標(biāo)系中translate我們分為三種情況：
? translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；
? translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；
? translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）；
? 三維坐標(biāo)系同理。
? 例： transform:translate(100px,20px)scale
? 含義：縮放。
? 同樣以二維坐標(biāo)系為例scale分為3種情況：
? scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；
? scaleX(x)元素僅水平方向縮放（X軸縮放）；
? scaleY(y)元素僅垂直方向縮放（Y軸縮放）；
? 縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。
? 三維坐標(biāo)系同理。
? 例： transform:scale(2,1.5)skew
? 含義：扭曲，傾斜；
? 還是以二維坐標(biāo)系為例scale分為3種情況：
? skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；
? skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
? skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）；
? 三維坐標(biāo)系同理。
? 例： transform:skew(30deg,10deg)
注意
在編寫3d動(dòng)畫時(shí)要為元素添加transform-style: preserve-3d；屬性。
為了讓動(dòng)畫效果兼容各大瀏覽器我們要在屬性前面添加相應(yīng)的內(nèi)核前綴。各個(gè)瀏覽器內(nèi)核前綴總結(jié)
3D動(dòng)畫講到這里也要接近尾聲了。
說了這么多不知道大家記住了多少。咱們?cè)僮鰝€(gè)小練習(xí)鞏固一下吧~
作業(yè)：利用animation動(dòng)畫制作一個(gè)有個(gè)性的3d立方體。
