一、過渡transition

特點：

1. 過渡是兩個狀態之間的過渡，只能從一種狀態過渡到另一種狀態
2. 過渡需要事件觸發，不能自動執行

綜合屬性:

可以同時控制多個屬性進行過渡，多個屬性之間用逗號隔開

transition: width 2s linear 1s,height 2s linear 1s;

拆分屬性：

• transition-property：

  • 定義過渡的屬性名(樣式名稱)，比如width height border
  • 可以具體的樣式屬性名，也可以使用關鍵字 all(所有屬性共用同樣的效果)

• transition-duration:

  • 定義動畫持續時間 單位是 秒/s

• transition-delay:

  • 延遲執行，延遲時間，單位是秒/s

• transition-timing-function：

  • 定義動畫函式曲線
  • 取值：
    • ease : 先快後慢
    • ease-in ：越來越快
    • ease-out: 越來越慢
    • ease-in-out：先慢再快再慢
    • liner：勻速直線運動
    • cubic-bezier()：貝賽爾曲線 cubic-bezier(.17,.67,.83,.67)

​ 貝賽爾曲線視覺化網站

二、動畫animation

特點：

1. 動畫是多個狀態之前的改變
2. 動畫可以自動執行，不需要事件觸發
3. 動畫通過 @keyframes 定義關鍵幀 定義動畫

綜合屬性：

animation: name duration timing-function delay iteration-count direction fill-mode;
屬性名：動畫名 動畫持續時間 動畫函式曲線 延遲執行  定義動畫的執行次數  定義動畫執行順序  定義動畫執行後保留的狀態

拆分屬性：

• animation-name: 引用動畫的名字（定義動畫的名字）
• animation-duration: 動畫持續時間
• animation-timing-function: 動畫函式曲線
• animation-delay： 延遲執行
• animation-iteration-count：
  定義動畫的執行次數
  • 指定動畫無限執行：infinite
• animation-direction： 定義動畫執行的順序
  • 取值：alternate 預設值
  • alternate-reverse 動畫先反向執行，然後再正向執行，必須結合 iteration-count 屬性一起使用才有效果；動畫至少要執行兩次
  • reverse 動畫反向執行
• animation-fill-mode: 定義動畫執行結束後保留的狀態
  • 取值：forword 動畫保留終點狀態
  • backwards 預設值，動畫保留起點狀態
  • both 動畫將遵循forwards 和 backwards 的規則，從而再兩個方向上擴充套件動畫屬性

通過@keyframes name{} 定義動畫：

1.from-to

@keyframes name{
	from{
		起點狀態
	}
	to{
		終點狀態
	}
}

2.百分比

@keyframes name{
	0%{
		起點狀態
	}
	n%{
		定義多箇中間狀態
	}
	100%{
		終點狀態
	}
}

三、2D與3D變換transform

含義：

transform屬性 ：定義2D（平面）和3D（三維場景）變換

注意：元素的變換中心預設是元素的中心點

取值：

1. 旋轉 rotate() 單位角度 deg; 取值可正可負，順時針（正直）或者逆時針（負值）

2. 平移 translate(x,y) 指定x軸和y軸的平移

   1. px 單位：可正可負
   2. 百分比
   3. 特點：平移的元素類似於相對定位

    translate(200px);	x軸移動
    translate(200px,200px)	x軸和y軸移動
   

3. **縮放 scale(n) ** n 代表縮放的比例

n >1 : 放大 n 倍

n < 1 : 縮小 n 倍

4. 斜切 skew(x,y) 單位：角度 deg 取值可正可負