注：根據(jù)MDN顯示疼进，許多CSS3新增屬性都是尚在實(shí)驗(yàn)中的功能诅需，使用前請(qǐng)務(wù)必參考好瀏覽器兼容性Can I Use淀零，添加所需前綴挽绩。使用 CSS3動(dòng)畫可以實(shí)現(xiàn)各種絢麗的效果，主要靠想象力驾中。
漸變色都有什么方式唉堪？
- 線性漸變
background:linear-gradient(direction,color-stop1,....)
background:linear-gradient(to end-direction,color-stop1,....)
//對(duì)角
background:linear-gradient(to end-level end-vertical,color-stop1,....)
//角度
background:linear-gradient(angle,color-stop1 10% ,....)
//透明度 第二個(gè)點(diǎn)默認(rèn)為50%位置
background:linear-gradient(angle,rgba(255,0,0,0),rgba(255,0,0,.5),rgba(255,0,0,1))
//重復(fù)線性漸變
background:repeating-linear-gradient(90deg,red 0%,blue 20%);
由于在不同瀏覽器兼容問題中direction的寫法可能不同，所以推薦使用角度寫法肩民，下圖為不同角度對(duì)應(yīng)的線性方向
- 徑向漸變
從起點(diǎn)到終點(diǎn)顏色從內(nèi)到外進(jìn)行圓形漸變（從中間向外拉）
位置是對(duì)角線
background:radial-gradient(center,shape size,color-stop,...)
//設(shè)置形狀 cicle ellipse(默認(rèn)形狀)
background:radial-gradient(shape,color-stop1,...)
//尺寸大小關(guān)鍵字 closest-side:最近邊 farthest-side:最遠(yuǎn)邊 closest-corner:最近角 farthest-corner:最遠(yuǎn)角
background:radial-gradient:(size,color-stop,...)
//重復(fù)漸變
background:repeating-radial-gradient(size,color-stop)
什么是transform屬性唠亚？
CSS中transform 屬性允許你修改CSS可視化模型的坐標(biāo)空間。通過transform持痰，可以讓元素進(jìn)行移動(dòng)（translate）灶搜、旋轉(zhuǎn)（rotate）、縮放（scale）工窍、傾斜（skew）割卖。
- 2D轉(zhuǎn)換
//角度
transform:rotate();
//平移
transform:translate();
//縮放
tranform:scale(.5);
//斜切
transform：skew(0deg);
- 3D轉(zhuǎn)換
//角度
transform:rotate3d();
//平移
transform:translate3d();
//縮放
tranform:scale3d();
//改變轉(zhuǎn)換元素的位置
transform-origin:x-axis y-axis z-axis;
什么是Transition屬性？
過渡屬性（Transition）：允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑過渡患雏。
transition-property:none|all|property：檢索或設(shè)置對(duì)象中參與過渡的屬性 可寫可不寫
transition-duration:time：檢索或設(shè)置對(duì)象過渡的持續(xù)時(shí)間 默認(rèn)值是0
tansition-timing-function：檢索或設(shè)置對(duì)象中過渡的動(dòng)畫類型
transition-delay:time：檢索或設(shè)置對(duì)象延遲過渡時(shí)間
transition:property duration timing-function delay
什么是關(guān)鍵幀鹏溯？
@keyframes 讓開發(fā)者通過指定動(dòng)畫中特定時(shí)間點(diǎn)必須展現(xiàn)的關(guān)鍵幀樣式（或者說停留點(diǎn)）來控制CSS動(dòng)畫的中間環(huán)節(jié)。這讓開發(fā)者能夠控制動(dòng)畫中的更多細(xì)節(jié)而不是全部讓瀏覽器自動(dòng)處理纵苛。
寫法：
@keyframes animationname{
keyframes-selector{
css-styles;
}
}
為了讓一個(gè)關(guān)鍵幀列表有效剿涮，它必須至少包含了對(duì)0%（或from）和100%（或to）即動(dòng)畫的開頭幀和結(jié)束幀的定義。 如果都沒有進(jìn)行定義攻人，那么整個(gè)@keyframes 是無效的取试，不能使用。
關(guān)鍵幀MDN
動(dòng)畫屬性
-
animation-name:keyframename|none：檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫名稱
keyframename:指定要綁定到選擇器的關(guān)鍵幀的名稱
none:指定有沒有動(dòng)畫（可用于覆蓋從級(jí)聯(lián)的動(dòng)畫） -
animation-duration:time：檢索或設(shè)置動(dòng)畫的持續(xù)時(shí)間
time：指定動(dòng)畫持續(xù)時(shí)間 -
animation-timing-function：檢索或設(shè)置對(duì)象動(dòng)畫的過渡類型 -
animation-delay：檢索或設(shè)置對(duì)象動(dòng)畫的延遲時(shí)間 -
animation-iteration-count:infinite|number：檢索或設(shè)置動(dòng)畫的循環(huán)次數(shù)
infinite：無限次 -
animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit：檢索或設(shè)置對(duì)象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)
normal：正常方向
reverse：反方向運(yùn)行
alternate：動(dòng)畫先正常運(yùn)行再反方向運(yùn)行怀吻，并持續(xù)交替運(yùn)行
alternate-reverse：動(dòng)畫先反運(yùn)行再正方向運(yùn)行瞬浓，并持續(xù)交替運(yùn)行 -
animation-fill-mode:none|forwards|backwards|both|initial|inherit：動(dòng)畫在不播放時(shí)（當(dāng)動(dòng)畫完成或者當(dāng)動(dòng)畫有延遲未開始播放時(shí)，要應(yīng)用到元素的樣式） -
animation-play-state:paused|running：指定動(dòng)畫是否正在運(yùn)行或已暫停 animation:name duration timing-function delay iteration-count direction fill-mode play-state
所有屬性的基本寫法：JSbin
