CSS 動畫是 Vue3 中實現組件動畫效果的高效方式，主要通過 CSS transitions 和 keyframes 動畫

CSS Keyframes（關鍵幀動畫）

用來創建復雜的動畫序列，可以精確控制動畫的各個階段。

核心語法：

@keyframes animationName {0% { /* 起始狀態 */ }50% { /* 中間狀態 */ }100% { /* 結束狀態 */ }
}.cssClass{animation: name            // 動畫名稱 (對應 @keyframes 名稱)(必需)duration        // 動畫持續時間(必需)timing-function // 動畫速度曲線delay           // 動畫延遲時間iteration-count // 動畫播放次數direction       // 動畫播放方向fill-mode       // 動畫前后如何應用樣式play-state;     // 動畫運行狀態
}

每一個參數都可以單獨的修改和使用

1. animation-name (必需)
   指定要應用的 @keyframes 動畫名稱

@keyframes example {from { opacity: 0; }to { opacity: 1; }
}.element {animation-name: example;
}

2. animation-duration (必需)
   定義動畫完成一個周期所需時間

.element {animation-duration: 2s; /* 可以是秒(s)或毫秒(ms) */
}

3. animation-timing-function
   定義動畫的速度曲線

   值	描述
   ease	默認值，慢快慢
   linear	勻速
   ease-in	慢開始
   ease-out	慢結束
   ease-in-out	慢開始和結束
   cubic-bezier(n,n,n,n)	自定義貝塞爾曲線
   steps(n)	分步動畫

.element {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

4. animation-delay
   定義動畫開始前的延遲時間

.element {animation-delay: 1s; /* 1秒后開始動畫 */
}

5. animation-iteration-count
   定義動畫播放次數

   值	描述
   number	具體次數 (如 2, 3.5)
   infinite	無限循環

.element {animation-iteration-count: infinite;
}

6. animation-direction
   定義動畫播放方向

   值	描述
   normal	默認，正向播放
   reverse	反向播放
   alternate	先正向后反向交替
   alternate-reverse	先反向后正向交替

.element {animation-direction: alternate;
}

7. animation-fill-mode
   定義動畫執行前后如何應用樣式

   值	描述
   none	默認，不應用任何樣式
   forwards	保持最后一幀樣式
   backwards	應用第一幀樣式
   both	同時應用 forwards 和 backwards

.element {animation-fill-mode: forwards;
}

8. animation-play-state
   控制動畫的播放狀態

   值	描述
   running	默認，動畫運行
   paused	動畫暫停

.element:hover {animation-play-state: paused;
}

案例實踐：

//基于CSS class的動畫
<template><div :class="{ shake: disabled }"><button @click="warnDisabled">Click me</button><span v-if="disabled">This feature is disabled!</span></div>
</template><script setup>
import { ref } from 'vue'
const disabled = ref(false)
const warnDisabled = () => {disabled.value = truesetTimeout(() => {disabled.value = false}, 1500)
}
</script><style scoped>
.shake {animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform: translate3d(0, 0, 0);
}
@keyframes shake {10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,50%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(4px, 0, 0);}
}
</style>

CSS Transitions（過渡動畫）

用于在元素從一種狀態轉變為另一種狀態時添加平滑的過渡效果。

核心語法：

.cssClass{transition: [property]       // 要過渡的CSS屬性[duration]       // 過渡持續時間(必需)[timing-function] // 過渡速度曲線[delay];         // 過渡延遲時間
}

1. transition-property(可選)
   指定應用過渡效果的 CSS 屬性名稱

常見可過渡屬性：
color, background-color
opacity
transform (包括 translate, scale, rotate 等)
width, height
margin, padding
border 相關屬性

.element {transition-property: opacity, transform;/* 或者 */transition-property: all; /* 所有可過渡屬性 */
}

2. transition-duration(必需)
   定義過渡效果持續時間

.element {transition-duration: 0.3s; /* 可以是秒(s)或毫秒(ms) */
}

3. transition-timing-function
   定義過渡效果的速度曲線

   值	描述
   ease	默認值，慢快慢
   linear	勻速
   ease-in	慢開始
   ease-out	慢結束
   ease-in-out	慢開始和結束
   cubic-bezier(n,n,n,n)	自定義貝塞爾曲線
   steps(n)	分步過渡

.element {transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

4. transition-delay(可選)
   定義過渡效果開始前的延遲時間

.element {transition-delay: 0.2s; /* 0.2秒后開始過渡 */
}

案例實踐：

//狀態驅動的動畫
<template><div@mousemove="onMousemove":style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"class="movearea"><p>Move your mouse across this div...</p><p>x: {{ x }}</p></div>
</template><script setup>
import { ref } from 'vue'
const x = ref(0)
const onMousemove = (e) => {x.value = e.clientX
}
</script><style scoped>
.movearea {transition: 0.3s background-color ease;
}
</style>

transform

transform 是 CSS 中用于對元素進行 2D 或 3D 變換的強大屬性，它可以改變元素的形狀、位置和方向而不影響文檔流。

可以組合多個變換函數，空格分隔，從右向左依次執行

transform: rotate(45deg) scale(1.2) translateX(50px);
/* 先平移 → 然后縮放 → 最后旋轉 */

2D

1. 位移（Translate）

transform: translateX(50px);     /* 水平移動 */
transform: translateY(-20px);    /* 垂直移動 */
transform: translate(50px, 20px); /* 同時XY移動 */

2. 旋轉（Rotate）

transform: rotate(45deg);       /* 順時針旋轉45度 */
transform: rotate(-90deg);      /* 逆時針旋轉90度 */

3. 縮放（Scale）

transform: scale(1.5);          /* 均勻放大1.5倍 */
transform: scaleX(0.5);         /* 水平縮小一半 */
transform: scaleY(1.2);         /* 垂直放大1.2倍 */
transform: scale(1.2, 0.8);     /* 水平放大，垂直縮小 */

4. 傾斜（Skew）

transform: skewX(15deg);        /* 水平傾斜 */
transform: skewY(-10deg);       /* 垂直傾斜 */
transform: skew(15deg, -10deg); /* 同時XY傾斜 */

3D

1. 3D位移

transform: translateZ(100px);     /* Z軸移動 */
transform: translate3d(50px, 20px, 100px); /* XYZ移動 */

2. 3D旋轉

transform: rotateX(45deg);       /* 繞X軸旋轉 */
transform: rotateY(30deg);       /* 繞Y軸旋轉 */
transform: rotateZ(15deg);       /* 繞Z軸旋轉 */
transform: rotate3d(1, 1, 0, 45deg); /* 自定義軸旋轉 */

3. 3D縮放

transform: scaleZ(1.5);         /* Z軸縮放 */
transform: scale3d(1.2, 1.2, 1.5); /* XYZ縮放 */

4. 透視（Perspective）

transform: perspective(500px) rotateY(45deg);

指定觀察者與 z=0 平面的距離
值越小，透視效果越強（類似廣角鏡頭）
值越大，透視效果越弱（類似長焦鏡頭）
必須為正數

相關屬性

1. transform-origin
   設置變換的基準點（默認是元素中心）

transform-origin: 50% 50%;     /* 默認值 */
transform-origin: left top;    /* 左上角 */
transform-origin: 20px 30px;   /* 具體坐標 */
transform-origin: bottom right 50px; /* 3D變換時Z軸 */

2. transform-style
   指定子元素是否保留3D位置

transform-style: flat;         /* 默認，子元素不保留3D位置 */
transform-style: preserve-3d;  /* 子元素保留3D位置 */

3. perspective
   設置3D變換的視距

perspective: 1000px;          /* 在父元素上設置 */

4. backface-visibility
   定義元素背面是否可見

backface-visibility: visible;  /* 默認，背面可見 */
backface-visibility: hidden;   /* 背面不可見 */

案例實踐：

//3d翻轉卡片
<template><div class="flip-container"><div class="flipper"><div class="front">正面</div><div class="back">背面</div></div></div>
</template><style scoped>
.flip-container {perspective: 100px;background: #644a68;
}
.flipper {transition: transform 3s;transform-style: preserve-3d;font-size: 30px;
}
.flip-container:hover .flipper {transform: rotateY(180deg);
}
.front,
.back {backface-visibility: hidden;
}
.back {transform: rotateY(180deg);
}
</style>