css3過度動畫
css3都有哪些新增的東西 : 過度粱侣，動畫辆毡，陰影，圓角甜害；
transition ： width （寬度產生動畫）500ms;
1.在哪產生的動畫 舶掖，2.動畫消耗的時間 3.運動曲線；4.延長多長時間才開始執(zhí)行動畫尔店，(不寫就不直行)
規(guī)定過度效果的曲線眨攘，默認是 ease; 多個用 ，(逗號)隔開嚣州，
過度屬性 : transitio;
圓角 : border - radius ,
如果不想寫那么多的話就用 transition : all is ease;
transition : all is linear . 勻速鲫售；
transition : all is ease . 開始和結束慢速，中間加速该肴；
transition ：all is ease - in . 開始的時候慢情竹，越來越快，然后停止匀哄；
transition : all is ease - out . 開始時快秦效，越來越慢，然后停止涎嚼；
transition : al is ease-in -out .開始和結束時慢速阱州。。法梯。苔货。
如果子元素超出父元素時 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明；
line-height 行高立哑；margin : 20px,間距20px,info信息
tansfrom 變形
1.位移 夜惭， 2.縮放 ， 3.旋轉 铛绰， 4.斜切 诈茧，
1.位移 transition(50px，50px) 水平和垂直至耻；
是不會影響文檔流的 若皱，自己動 不會影響下邊的；
2.旋轉 transition:rotate（30deg）沿著z 軸旋轉 尘颓；
3.縮放 transitiion ：scale(0.5,0.2) 寬度 高度；
4.斜切 transition : skew(0,45deg ) x軸不動晦譬，y軸斜切45度疤苹；水平和垂直；
margin : 50px(上邊距) auto 0;
元素旋轉
transfrom : rotate(45deg) 默認是沿著z軸旋轉敛腌；
transfrom : perspective(800px ) rotate(45deg)
perspective 設置透視距離卧土，經驗數(shù) 800px 惫皱，比較符合人眼的透視距離；
transfrom -style ： perseve-3d ,設置盒子按3d空間顯示尤莺；
變形中間點
div : nthchild{} ;第幾個孩子旅敷；
transfrom-origin:left center, 設置變形的中心點 (左中)；
transfrom-origin:left top,設置變形的中心點 (左上)颤霎；
背面可見
margin : 上媳谁，右，下友酱，左晴音，
如果不想變的話 加過度 transfom:all 500ms ease;
800是經驗值 起始角度 rotatey (0deg);
有透視效果 transfrom -style : preserve -3d;
設置盒子背面是否可見
backface - visibity : hidden; 背面不可見 （隱藏不可見）；
圖片翻面時另一張圖片
animation 動畫
多個設置用空格隔開缔杉；
animation : moving 1s ease(運動曲線) 1s(延遲) 5(動的次數(shù) ) alternat(是否返回)
alternate 設置是否返回锤躁；
infinite 不限次數(shù)；
動畫運歲動的狀態(tài) ： 暫停 animation-play-state : paused;
動畫運動的狀態(tài) ： 運行 animation-play-state : running;
forwards 動畫結束最后狀態(tài)或详；
both 都 起始和結束都設置系羞；
@keyframes 創(chuàng)建關鍵動畫時；聲明一個動畫霸琴，給他后面隨便起一個名字觉啊；
動畫一個狀態(tài)到另一個狀態(tài)；
隱藏 overflow : hidden;
相對定位 ：position : relative;
絕對定位 : positiion : absolute;
動畫定義的關鍵字:
@keyframes 名字{ 起始狀態(tài) from [ left 0px]
終止狀態(tài) to [ left 0px,]}
from 開始 沈贝，to 結束杠人；
循環(huán)一直走 ：infinte ;
transfrom : scaley;
多幀動畫
位移動畫 transfrom : tanslateY(Y軸) 10px;
圓角 border - ralios : 50px;
原路返回 ： alternate;
縮放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X軸) 13px（Y軸）12px(羽化) 14px(擴展) pink(顏色)；
box-shadow : 180px(水平偏移) 20px(垂直) 17px(羽化) 0px(擴展) pink(顏色) inset;
寫上inset 是內部陰影宋下，不寫是外部陰影嗡善。
作業(yè)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加載項</title>
<style>
.box{
width: 600px;
height: 500px;
border: 1px solid black;
margin: 50px auto 50px;
position: relative;
}
.box1{
width: 50px;
height: 200px;
position: absolute;
left:100px;
top:240px;
background-color: red;
border-radius: 15px;
animation:moving 300ms ease 200ms infinite alternate both;
}
.box2{
width: 50px;
height: 200px;
position: absolute;
left:200px;
top:240px;
background-color: green;
border-radius: 15px;
animation:moving 200ms ease 200ms infinite alternate both
}
.box3{
width: 50px;
height: 200px;
position: absolute;
left:300px;
top:240px;
background-color: blue;
border-radius: 15px;
animation:moving 200ms ease 300ms infinite alternate both;
}
.box4{
width: 50px;
height: 200px;
position: absolute;
left:400px;
top:240px;
background-color: yellow;
border-radius: 15px;
animation:moving 300ms ease 200ms infinite alternate both;
}
.box5{
width: 50px;
height: 200px;
position: absolute;
left:500px;
top:240px;
background-color: pink;
border-radius: 15px;
animation:moving 100ms ease 300ms infinite alternate both;
}
@keyframes moving{
from{
transform:scaleY(1);
}
to{
transform:scaleY(0.5);
}
}
.box p{
display: inline-block;
position: absolute;
top: 400px;
left:280px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<p>loading...</p>
</div>
</body>
<html>
