過渡 transition

讓屬性變化成為一個持續一段時間的過程，而不是立即生效的

可能的屬性：

執行變換的屬性： transition-property,  
變換延續的時間： transition-duration,  過渡延遲的時間：transition-delay

在延續時間段，變換的速率變化 transition-timing-function,  
       linear： 勻速 
       ease：（預設值） 慢快慢 
       easein

而我們通常會用簡寫方式（一般直接用這個）：

transition:width 2s, height 2s, background-color 2s, transform 2s;
 

多個屬性過渡的時候 用逗號隔開！ 
display不支援過渡    淡入淡出最好用opacity

動畫 animation

可以為從一個CSS樣式配置到另一個CSS樣式配置的動畫製作動畫。動畫包含兩個元件，一個描述CSS動畫的樣式和一組指示動畫樣式的開始和結束狀態的關鍵幀，以及可能的中間路標。

可能的值：

animation­name  動畫名稱  
animation­duration  持續時間  
animation­delay  延遲時間  
animation­timing­function  運動曲線  
animation­iteration­count  規定動畫播放次數！  
infinite無限重複 或者number 
animation­direction  規定輪流反向播放動畫！  
normal： （預設） 正常方向 
reverse： 反方向執行 
alternate ： 動畫先正後反方向執行 
alternate reverse： 先反後正方向

animation-name動畫名稱

div{
    /*動畫：動畫名稱 動畫持續時間*/
    animation: move 2s;
}

規定動畫如何運動，繫結動畫，注意寫法：

@keyframes move{
    from{width:100px;backrgound:red;}
    to{width:500px;background:blue;}
    /*0%{} 100%{}*/
}

animation-play-state: 動畫執行狀態

paused 暫停動畫
running 執行動畫
animation-fill-mode: 規定動畫的第一幀和最後一幀的狀態！通俗的講就是動畫結束之後保持
什麼狀態  
none （預設） 原始狀態>動畫>原始狀態 
forwards 原始狀態>動畫>停在動畫幀100% 
backwards (忽略原始狀態)進入動畫幀0%>動畫>原始狀態 
both (忽略原始狀態)進入動畫幀0%>動畫>停在動畫幀100%

變換

屬性允許你修改CSS視覺格式模型的座標空間。使用它，元素可以被轉換（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）

1.旋轉rotate

這裡面的值可以是（角度deg）（圈turn）（弧度rad）（梯度grad） 只是佔據自己的位置，不會影響其他元素的位置

div{
    transform:rotate();
}

2.變換焦點 transform-origin

具體的值 
百分比值 
left / top / right / bottom / center

div{
    /*這裡要注意的是：不要寫在hover樣式裡面，而是本身元素裡面。預設是中心點 用空格隔開
    */
    transform-origin:x y;
}

3.縮放 scale

放大和縮小的倍數 不支援負值！

div{
    transform:scale(1.2);
}

4.位移 translate

div{
    /*兩個值寫法 中間用逗號隔開*/
    transform:translate(X,Y);
    /*一個值寫法*/
    transform:translateX();
    transform:translateY();
}

5.傾斜

不同於旋轉，可以用度數，弧度 角度 梯度控制 ，當到一個臨界點的時候會消失不見

div{
    transform:skew(30deg,30deg);
}

6.複合寫法

transform 不同的值用空格隔開 括號裡面用逗號隔開

div{
    transform:translate(50px,50px) scale(1.2);
}

允許調整大小

注意：必須要新增overflow:;屬性 因為overflow重新檢測盒子裡面的內容
overflow值可以是： 
預設visible 
hidden 隱藏 
auto 根據內容決定是否滾動條 
scroll 滾動條

resize:

none 預設 
horizontal 水平可以縮放 
vertical 垂直可以縮放 
both 垂直水平都能縮放

舞臺

觀眾離介面的距離

body{
    perspective:800px;
}

計算calc()

calc()，你就可以通過計算來決定一個CSS屬性的值,可以用在任何長度,數值,時間,角度,頻率
等處。
.
可以使用  + - * /  四則運算 也可以加括號 
運算子號前後必須要有空格 
在實際的開發中需要加上相容性字首，字首加在 calc 前面 
而真正在計算的時候 我們要把所有的距離都考慮進去 如：邊框 內邊距 等…

div{
    width:-webkit-calc(100% - （100px - 50px）);
    width:-moz-calc(100% - (25px * 2));
}