目錄

• transform
  • perspective
  • perspective-origin
  • translate（x，y）/transla3d（x，y，z）
  • rotate（angle）
  • scale（x，y）/scale3d（x，y，z）
• transform-origin
• transition
• animation
• animation和transition的區別

transform

transform描述元素的靜態樣式，設定元素在二維或三維座標下的位移，旋轉，透視，縮放等屬性。所有屬性：https://www.w3school.com.cn/cssref/pr_transform.asp

常用屬性：

perspective

3D影象到螢幕的距離，以畫素為單位（可作為獨立CSS屬性）

perspective-origin

3D影象的開始位置，如perspective-origin：50% 50%；為影象在頁面中間。（可作為獨立CSS屬性）

translate（x，y）/transla3d（x，y，z）

影象在二維/三維座標的位置

rotate（angle）

旋轉：
rotate（ndeg）元素繞中心旋轉
rotateX（ndeg）元素繞X軸旋轉
rotateY（ndeg）元素繞Y軸旋轉
rotateZ（ndeg）元素繞Z軸旋轉

scale（x，y）/scale3d（x，y，z）

影象在對應方向縮放。

transform-origin

影象變化的基準：bottom，top，座標等。

transition

（簡寫屬性）通常和hover等配合使用，由事件觸發。
transition：property duration timing-function delay；
transition: transform 1s linear 1s；
定義了動畫的屬性，動畫完成時間，過渡效果，延遲時間。

常用速度曲線：
linear：勻速（cubic-bezier(0,0,1,1)）
ease：開始和結束的時候慢速，中間變快（cubic-bezier(0.25,0.1,0.25,1)）
ease-in：慢速開始（cubic-bezier(0.42,0,1,1)）
ease-out：慢速結束（cubic-bezier(0,0,0.58,1)）
ease-in-out：慢速開始和結束（cubic-bezier(0.42,0,0.58,1)）
cubic-bezier為貝塞爾曲線

animation

（簡寫屬性）必須結合@keyframes使用
animation：name duration timing-function delay iteration-count direction fill-mode；
名稱，播放時間，過渡效果，延遲，播放次數，方向，結束方式

@keyframes drop{//動畫名稱
  0%{opacity: 0;}
  70%{transform: translateY(700px);}
  100%{transform: translateY(650px); opacity: 1;}
}
//在需要動畫的元素上新增動畫
animation: drop 0.5s ease forwards；

animation和transition的區別

1. 觸發條件不同，transition通常和事件配合觸發，animation載入後立即觸發
2. animation可設定迴圈
3. animation可設定每一幀動畫，transition只能設定頭尾，animation可在不同幀單獨設定變化的屬性，transition所有屬性要一起設定
4. transition與js的互動更緊密。