css3過(guò)度動(dòng)畫(huà)
css3都有哪些新增的東西 : 過(guò)度疏魏，動(dòng)畫(huà)，陰影晤愧，圓角大莫；
transition ： width （寬度產(chǎn)生動(dòng)畫(huà)）500ms;
1.在哪產(chǎn)生的動(dòng)畫(huà) ，2.動(dòng)畫(huà)消耗的時(shí)間? 3.運(yùn)動(dòng)曲線;4.延長(zhǎng)多長(zhǎng)時(shí)間才開(kāi)始執(zhí)行動(dòng)畫(huà)官份，(不寫(xiě)就不直行)
規(guī)定過(guò)度效果的曲線只厘，默認(rèn)是 ease;?? 多個(gè)用 ，(逗號(hào))隔開(kāi)舅巷，
過(guò)度屬性 : transitio;
圓角 : border - radius ,
如果不想寫(xiě)那么多的話(huà)就用 transition : all is ease;
transition : all is linear .? 勻速羔味；
transition : all is ease . 開(kāi)始和結(jié)束慢速，中間加速钠右；
transition ：all is ease - in . 開(kāi)始的時(shí)候慢赋元，越來(lái)越快，然后停止飒房；
transition : all is ease - out . 開(kāi)始時(shí)快们陆，越來(lái)越慢，然后停止情屹；
transition : al is ease-in -out .開(kāi)始和結(jié)束時(shí)慢速。杂腰。垃你。。
如果子元素超出父元素時(shí) : overflow : hidden;(一剪梅)
rgba(0 ,0, 0,0.5 );半透明喂很；
line-height 行高惜颇；
margin : 20px,間距20px,info信息
tansfrom 變形
1.位移 ， 2.縮放 少辣， 3.旋轉(zhuǎn) 凌摄， 4.斜切 ，
1.位移? transition(50px漓帅，50px)? 水平和垂直锨亏；
?? 是不會(huì)影響文檔流的 ，自己動(dòng) 不會(huì)影響下邊的忙干；
2.旋轉(zhuǎn)? transition:rotate（30deg）沿著z 軸旋轉(zhuǎn) 器予；
3.縮放? transitiion ：scale(0.5,0.2)?? 寬度 高度；
4.斜切? transition : skew(0,45deg )? x軸不動(dòng)捐迫，y軸斜切45度乾翔；水平和垂直；
margin : 50px(上邊距) auto 0;
元素旋轉(zhuǎn)
transfrom : rotate(45deg)? 默認(rèn)是沿著z軸旋轉(zhuǎn)施戴；
transfrom : perspective(800px ) rotate(45deg)
perspective 設(shè)置透視距離反浓，經(jīng)驗(yàn)數(shù) 800px 萌丈，比較符合人眼的透視距離；
transfrom -style ： perseve-3d?? ,設(shè)置盒子按3d空間顯示雷则；
變形中間點(diǎn)
div : nthchild{}? ;第幾個(gè)孩子辆雾；
transfrom-origin:left center, 設(shè)置變形的中心點(diǎn) (左中)；
transfrom-origin:left top,設(shè)置變形的中心點(diǎn) (左上)巧婶；
背面可見(jiàn)
margin : 上乾颁，右，下艺栈，左英岭，
如果不想變的話(huà)?? 加過(guò)度? transfom:all 500ms ease;
800是經(jīng)驗(yàn)值? 起始角度?? rotatey (0deg);
有透視效果? transfrom -style? : preserve -3d;
設(shè)置盒子背面是否可見(jiàn)
backface - visibity : hidden; 背面不可見(jiàn)?? （隱藏不可見(jiàn)）；
圖片翻面時(shí)另一張圖片
animation 動(dòng)畫(huà)
多個(gè)設(shè)置用空格隔開(kāi)湿右；
animation : moving 1s ease(運(yùn)動(dòng)曲線) 1s(延遲) 5(動(dòng)的次數(shù) ) alternat(是否返回)
alternate? ? 設(shè)置是否返回诅妹；
infinite? ? 不限次數(shù)；
動(dòng)畫(huà)運(yùn)歲動(dòng)的狀態(tài) ： 暫停? animation-play-state : paused;
動(dòng)畫(huà)運(yùn)動(dòng)的狀態(tài) ： 運(yùn)行? animation-play-state : running;
forwards 動(dòng)畫(huà)結(jié)束最后狀態(tài)毅人；
both 都 起始和結(jié)束都設(shè)置吭狡；
@keyframes? 創(chuàng)建關(guān)鍵動(dòng)畫(huà)時(shí)；聲明一個(gè)動(dòng)畫(huà)丈莺，給他后面隨便起一個(gè)名字划煮；
動(dòng)畫(huà)一個(gè)狀態(tài)到另一個(gè)狀態(tài)；
隱藏 overflow : hidden;
相對(duì)定位 ：position : relative;
絕對(duì)定位? : positiion : absolute;
動(dòng)畫(huà)定義的關(guān)鍵字:
@keyframes? 名字{ 起始狀態(tài) from [ left 0px]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 終止?fàn)顟B(tài) to [ left 0px,]}
from 開(kāi)始 缔俄，to 結(jié)束弛秋；
循環(huán)一直走 ：infinte?? ;
transfrom : scaley;
多幀動(dòng)畫(huà)
位移動(dòng)畫(huà)?? transfrom : tanslateY(Y軸) 10px;
圓角? ? border - ralios : 50px;
原路返回 ： alternate;
縮放?? transfrom : scale(0.5 0.5)
box-shadow : 17px(X軸) 13px（Y軸）12px(羽化) 14px(擴(kuò)展) p
作者：shuffle笑
鏈接：http://www.reibang.com/p/9eee9037b384
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處俐载。
