1 變換 transform

1.1 變換相關 CSS 屬性

總結：

1. 行內元素無法設定變換
2. 需要設定給變換的元素的屬性：
   transform、tranform-origin、backface-visibility
   需要設定給變換元素的父元素的屬性：
   transform-style、perspective、perspective-origin

1.2 2D 變換的方法

① 位移 translate 方法

translateX()				設定水平方向位移
translateY()				設定垂直方向位置
translate()					同時設定水平方向和垂直方向的位移

位移的變換方法引數的設定規則：

1. 使用長度設定位移距離，允許負值
   使用百分比，水平位移參照元素自身寬度，垂直位移參照元素自身高度
2. translate() 如果只設置一個值，表示水平位移的距離，垂直方向不位移。
 

位移的應用（絕對或固定定位元素的水平和垂直居中）：

/* 水平垂直居中的方案 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

② 縮放 scale 方法

scaleX()				設定水平方向的縮放比例
scaleY()				設定垂直方向的縮放比例
scale()					同時設定水平方向和垂直方向的縮放比例

縮放的變換方法引數的設定規則：

1. 使用純數字(倍數)或者百分比表示縮放的比例
2. 使用負數元素自身會反轉過來
3. scale() 如果只設置一個值，表示同時設定水平方向和垂直方向的縮放比例
 

③ 旋轉 rotate 方法

rotate()

變換方法引數的設定規則：

1. 使用角度，可以是負值，角度單位是 deg
2. 預設是順時針旋轉
3. 預設旋轉中心是元素中心

1.3 3D 變換的方法

① 3D 位移

translateZ()				設定沿z軸位移的距離
translate3D(x,y,z)			同時設定x、y、z軸位移的距離，必須設定3個長度

② 3D 縮放

scaleZ()
scale3D(x,y,z)				同時設定x、y、z軸的縮放，必須設定三個倍數

3D 縮放沒有效果！

③ 3D 旋轉

rotateX()				x軸旋轉
rotateY()				y軸旋轉
rotateZ()				z軸旋轉，等同於2D旋轉 rotate()
rotate3D()				同時沿x軸、y軸、z軸一起旋轉，設定4個值，前三個都是0或者1，對應的軸是否旋轉，第4個值設定角度

2 過渡 transition

2.1 過渡相關 CSS 屬性

哪些 CSS 屬性可以過渡？

1. 屬性的值是長度的，如 width、height、margin、padding、border-width 等等
2. 屬性的值是顏色的，如 color、background-color、border-color 等等
3. 屬性的值是純數字，如 opacity、font-weight
4. 變換屬性 transform

什麼時候設定過渡相關的屬性 transition？

在元素的樣式變化之前，提前設定過渡相關的屬性。

貝塞爾曲線線上工具：

https://cubic-bezier.com

transition-timing-function 設定過渡運動曲線：

ease			平滑過渡，預設值
linear			勻速
ease-in			加速運動
ease-out		減速運動
ease-in-out		先加速再減速
cubic-bezier()	特定的貝塞爾曲線設定運動曲線
steps()			分步運動 ,第一個引數設定步數，第二個引數指定每一步發生的時間點，預設是end，也可以選擇start，end 表示先等待，start表示先運動
step-start		等同於 steps(1,start)
step-end		等同於 steps(1,end)

2.2 觸發過渡的條件

使用者的行為和動作導致元素樣式發生改變，如果元素設定了過渡效果，樣式的改變具有過渡動畫效果

1. 偽類選擇器 :hover :active :focus :checked
2. JS 的事件
3. CSS 媒體查詢

3 動畫 animation

3.1 關鍵幀

@keyframes 關鍵幀名字 {
    from {}
    to {}
}

@keyframes 關鍵幀名字 {
    100% {}
}

@keyframes 關鍵幀名字 {
    from {}
    40% {}
    80% {}
    to {}
}

Tips：在關鍵幀中使用2d或3d變換，需要設定相關元素或父元素的屬性

關鍵幀與元素的關係：

1. 一個元素可以設定多個關鍵幀
2. 一個關鍵幀可以設定到多個元素上

3.2 動畫相關 CSS 屬性