CSS 动画是 Vue3 中实现组件动画效果的高效方式，主要通过 CSS transitions 和 keyframes 动画
CSS Keyframes（关键帧动画）
用来创建复杂的动画序列，可以精确控制动画的各个阶段。
核心语法：
typescript
@keyframes animationName {
0% { /* 起始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
.cssClass{
animation:
name // 动画名称 (对应 @keyframes 名称)(必需)
duration // 动画持续时间(必需)
timing-function // 动画速度曲线
delay // 动画延迟时间
iteration-count // 动画播放次数
direction // 动画播放方向
fill-mode // 动画前后如何应用样式
play-state; // 动画运行状态
}每一个参数都可以单独的修改和使用
animation-name(必需)
指定要应用的@keyframes动画名称
typescript
@keyframes example {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: example;
}animation-duration(必需)
定义动画完成一个周期所需时间
typescript
.element {
animation-duration: 2s; /* 可以是秒(s)或毫秒(ms) */
}-
animation-timing-function
定义动画的速度曲线值 描述 ease 默认值，慢快慢 linear 匀速 ease-in 慢开始 ease-out 慢结束 ease-in-out 慢开始和结束 cubic-bezier(n,n,n,n) 自定义贝塞尔曲线 steps(n) 分步动画
typescript
.element {
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}animation-delay
定义动画开始前的延迟时间
typescript
.element {
animation-delay: 1s; /* 1秒后开始动画 */
}-
animation-iteration-count
定义动画播放次数值 描述 number 具体次数 (如 2, 3.5) infinite 无限循环
typescript
.element {
animation-iteration-count: infinite;
}-
animation-direction
定义动画播放方向值 描述 normal 默认，正向播放 reverse 反向播放 alternate 先正向后反向交替 alternate-reverse 先反向后正向交替
typescript
.element {
animation-direction: alternate;
}-
animation-fill-mode
定义动画执行前后如何应用样式值 描述 none 默认，不应用任何样式 forwards 保持最后一帧样式 backwards 应用第一帧样式 both 同时应用 forwards 和 backwards
typescript
.element {
animation-fill-mode: forwards;
}-
animation-play-state
控制动画的播放状态值 描述 running 默认，动画运行 paused 动画暂停
typescript
.element:hover {
animation-play-state: paused;
}案例实践：
typescript
//基于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 = true
setTimeout(() => {
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（过渡动画）
用于在元素从一种状态转变为另一种状态时添加平滑的过渡效果。
核心语法：
typescript
.cssClass{
transition:
[property] // 要过渡的CSS属性
[duration] // 过渡持续时间(必需)
[timing-function] // 过渡速度曲线
[delay]; // 过渡延迟时间
}transition-property(可选)
指定应用过渡效果的 CSS 属性名称
常见可过渡属性：
color, background-color
opacity
transform (包括 translate, scale, rotate 等)
width, height
margin, padding
border 相关属性
typescript
.element {
transition-property: opacity, transform;
/* 或者 */
transition-property: all; /* 所有可过渡属性 */
}transition-duration(必需)
定义过渡效果持续时间
typescript
.element {
transition-duration: 0.3s; /* 可以是秒(s)或毫秒(ms) */
}-
transition-timing-function
定义过渡效果的速度曲线值 描述 ease 默认值，慢快慢 linear 匀速 ease-in 慢开始 ease-out 慢结束 ease-in-out 慢开始和结束 cubic-bezier(n,n,n,n) 自定义贝塞尔曲线 steps(n) 分步过渡
typescript
.element {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}transition-delay(可选)
定义过渡效果开始前的延迟时间
typescript
.element {
transition-delay: 0.2s; /* 0.2秒后开始过渡 */
}案例实践：
typescript
//状态驱动的动画
<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 变换的强大属性，它可以改变元素的形状、位置和方向而不影响文档流。
可以组合多个变换函数，空格分隔，从右向左依次执行
typescript
transform: rotate(45deg) scale(1.2) translateX(50px);
/* 先平移 → 然后缩放 → 最后旋转 */2D
- 位移（Translate）
typescript
transform: translateX(50px); /* 水平移动 */
transform: translateY(-20px); /* 垂直移动 */
transform: translate(50px, 20px); /* 同时XY移动 */- 旋转（Rotate）
typescript
transform: rotate(45deg); /* 顺时针旋转45度 */
transform: rotate(-90deg); /* 逆时针旋转90度 */- 缩放（Scale）
typescript
transform: scale(1.5); /* 均匀放大1.5倍 */
transform: scaleX(0.5); /* 水平缩小一半 */
transform: scaleY(1.2); /* 垂直放大1.2倍 */
transform: scale(1.2, 0.8); /* 水平放大，垂直缩小 */- 倾斜（Skew）
typescript
transform: skewX(15deg); /* 水平倾斜 */
transform: skewY(-10deg); /* 垂直倾斜 */
transform: skew(15deg, -10deg); /* 同时XY倾斜 */3D
- 3D位移
typescript
transform: translateZ(100px); /* Z轴移动 */
transform: translate3d(50px, 20px, 100px); /* XYZ移动 */- 3D旋转
typescript
transform: rotateX(45deg); /* 绕X轴旋转 */
transform: rotateY(30deg); /* 绕Y轴旋转 */
transform: rotateZ(15deg); /* 绕Z轴旋转 */
transform: rotate3d(1, 1, 0, 45deg); /* 自定义轴旋转 */- 3D缩放
typescript
transform: scaleZ(1.5); /* Z轴缩放 */
transform: scale3d(1.2, 1.2, 1.5); /* XYZ缩放 */- 透视（Perspective）
typescript
transform: perspective(500px) rotateY(45deg);指定观察者与 z=0 平面的距离
值越小，透视效果越强（类似广角镜头）
值越大，透视效果越弱（类似长焦镜头）
必须为正数
相关属性
transform-origin
设置变换的基准点（默认是元素中心）
typescript
transform-origin: 50% 50%; /* 默认值 */
transform-origin: left top; /* 左上角 */
transform-origin: 20px 30px; /* 具体坐标 */
transform-origin: bottom right 50px; /* 3D变换时Z轴 */transform-style
指定子元素是否保留3D位置
typescript
transform-style: flat; /* 默认，子元素不保留3D位置 */
transform-style: preserve-3d; /* 子元素保留3D位置 */perspective
设置3D变换的视距
typescript
perspective: 1000px; /* 在父元素上设置 */backface-visibility
定义元素背面是否可见
typescript
backface-visibility: visible; /* 默认，背面可见 */
backface-visibility: hidden; /* 背面不可见 */案例实践：
typescript
//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>