CSS3 動畫完全指南：Transition、Animation、Transform 3D 核心屬性與實戰案例

CSS3 動畫三大支柱

1. Transition（過渡）： 屬性值平滑變化。
2. Animation（關鍵幀動畫）： 多階段、可循環、精細控制。
3. Transform（2D/3D 變換）： 位移、旋轉、縮放、傾斜，配合 3D 透視實現立體效果。

一、Transition 過渡詳解

語法

transition:    ;
/* 簡寫多屬性 */
transition: top 0.5s ease, left 0.5s ease;
/* 或分開寫 */
transition-property: top, left;
transition-duration: 0.5s, 0.5s;
transition-timing-function: ease, ease;

timing-function 五大曲線

完整可運行示例：點擊按鈕觸發不同曲線移動

<style>
#box {
  width: 200px; height: 200px; background: chocolate;
  position: relative; left: 0; top: 0;
  transition: top 5s ease, left 5s ease;
  /* 廠商前綴 -moz-, -webkit-, -o- 略 */
}
</style>
<div id="box"></div>
<button id="e1">ease</button>
<button id="e2">linear</button> ...
<script>
box.style.transitionTimingFunction = "ease"; // 動態修改曲線
box.style.left = "1000px"; box.style.top = "100px"; // 觸發過渡
</script>

二、Animation 關鍵幀動畫詳解

語法

animation: name duration timing-function delay iteration-count direction;
/* 關鍵幀定義 */
@keyframes mymove {
  from { top: 0px; }
  50%  { top: 200px; }
  to   { top: 0px; }
}

屬性詳表

示例：無限循環上下彈跳

div {
  width: 100px; height: 100px; background: red;
  position: relative;
  animation: mymove 5s infinite;
}
@keyframes mymove {
  from { top: 0px; }
  to   { top: 200px; }
}

三、Transform 3D 變換與透視

建立 3D 場景

.scene {
  perspective: 800px;           /* 視點距離屏幕距離 */
  perspective-origin: 50% 50%;  /* 視點位置（屏幕中心） */
  transform-style: preserve-3d; /* 子元素保持 3D 空間 */
  transform-origin: 0% 100%;    /* 旋轉中心點（此處為左下角） */
}

核心變換函數

transform-origin 改變旋轉中心

• X 軸：left | center | right
• Y 軸：top | center | bottom
• Z 軸：<length>（像素值）

默認中心為元素幾何中心。示例中設為 0% 100%（左下角），配合 rotateY 實現翻書效果。

完整 3D 互動示例

<style>
#box { width:200px; height:200px; background:chocolate; position:relative;
  perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d;
  transform-origin:0% 100%; }
</style>
<div id="box"></div>
<button id="rx">rotateX</button>
<button id="ry">rotateY</button>
<button id="rz">rotateZ</button>
<script>
rx.onclick = () => box.style.transform = "rotateX(30deg)";
ry.onclick = () => box.style.transform = "rotateY(30deg)";
rz.onclick = () => box.style.transform = "rotateZ(30deg)";
</script>

四、綜合實戰建議

• 性能優先： 動畫屬性盡量用 transform、opacity（GPU 加速），避免 top/left/width/height 觸發重排。
• 減少重繪： 將動畫元素提升到獨立合成層（will-change: transform）。
• 降級策略： 使用 @supports 檢測特性，提供無動畫備選樣式。
• 無障礙： 尊重 prefers-reduced-motion 媒體查詢，為敏感用戶禁用動畫。

參考資源

原文地址：CSS3 動畫效果小結