功能：實現元素不同狀態之間的平滑過渡。
之前：元素->hover狀態 直接切換，從開始狀態到結束狀態，瞬間完成，中間過程幾乎無法檢視。
格式：transition：過渡的屬性 完成時間（s） 運動曲線 延遲時間
數值型的屬性才可以設定過渡。
width,height,color,font-size
transition-property 過渡屬性：發生變化時，想要有過渡效果的屬性。all，全屬性。
transition-timing-function 運動曲線：
linear 勻速
ease 減速
ease-in 加速
ease-in-out 先加速後減速
1.2d位移transform: translate(x,y);
x表示水平方向上的偏移量，向右為正，向左為負；
y表示垂直方向上的偏移量，向上為負，向下為正。
引數值：
px百分比。盒子本身的寬高*百分比
2. 2d轉換縮放 transform:scale(x,y)
格式：transform:scale(x,y)
x表示水平方向的縮放倍數
y垂直方向的縮放倍數
取值：大於1表示放大，小於1縮小。
3.傾斜transform:skew(x,y）
x表示水平傾斜角度；
y表示垂直傾斜角度。
單位：deg 角度
正值：順時針，負值：逆時針。
4 .讓盒子進行旋轉transform: rotate(x);
格式：transform: rotate(角度);
單位：deg 正值為順時針，負值為逆時針。
transform 可以書寫多個2d轉換，中間用空格隔開。
當rotate和translate在一起的時候，注意書寫順序。
rotate在前，先旋**身，再按照旋轉的角度，進行位移。
translate在前，先進行位移，再旋**身。
設定旋轉的中心點 transform-origin: x;
屬性值x：
1.px
2.英文（left center right top bottom）
3.百分比 : 百分比是按照自身寬高*百分比計算的。
只寫乙個值，第二值預設為center。
5.3d旋轉 transform: rotate3d(x,y,z);
perspective: 110px;
透視：加給變換盒子的父盒子
設定的使用者的眼睛與平面的距離。
透視只是視覺上的呈現，不是真正的3d。
backface-visibility: hidden;
當盒子旋轉過背面時，隱藏
animition和transition的配合
button first click function 10000 新增乙個class slowwalk 裡面用到了animation，用於切換人物畫面，形成動畫 slowwalk webkit keyframes person slow 25 50 75 100 同時用transition讓人物走...
transition和transition的區別
1.兩者的區別，觸發條件不一樣，transition一般通過hover和事件等觸發，而animation 是立即觸發 2.animation可以設定迴圈次數 3.animation可以很靈活的控制動畫定義 過渡transition是乙個復合屬性，包括transition property trans...
過渡動畫（transition）
transition property transition duration transition timing function transition delay 要過渡的屬性 想要變化的css屬性，寬高和背景顏色內外邊距都可以。如果想要所有的屬性都變化過渡，寫乙個all就可以 花費時間 單位是...