Klein's-blue的博客

记录生活，分享技术

0%

动画与过渡

CSS 动画与过渡（完整版 · 2025-2026 主流开发实用知识）

一、过渡动画 transition

transition 是 CSS 中最常用、最容易上手的动画方式，主要用于状态切换时的平滑过渡（hover、active、class 切换等）。

1.1 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
transition: 属性 时长 缓动函数 延迟;
/* 最常用简写（日常 90% 场景） */
transition: all 0.3s ease;

/* 推荐 - 性能更好、控制更精确 */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

/* 完整拆分写法（不同属性不同时长/缓动） */
transition-property: transform, opacity, background-color;
transition-duration: 0.4s, 0.6s, 0.3s;
transition-timing-function: ease-out, linear, ease-in-out;
transition-delay: 0s, 0.1s, 0s;

1.2 缓动函数速查表

缓动函数 视觉感受 典型使用场景 推荐度
ease 默认、自然 通用 ★★★★★
linear 匀速 进度条、loading、滚动指示器 ★★★☆☆
ease-in 慢 → 快 物体出现、入场 ★★★☆☆
ease-out 快 → 慢 退出、消失、弹窗关闭 ★★★★☆
ease-in-out 慢 → 快 → 慢 最常用 按钮、卡片、菜单 ★★★★★
cubic-bezier(0.4, 0, 0.2, 1) 苹果风格极致平滑 现代感强、高端交互、几乎所有主流产品 ★★★★★
cubic-bezier(0.68, -0.55, 0.265, 1.55) 明显回弹 overshoot 可爱、活泼、强调反馈的交互 ★★★★☆
cubic-bezier(0.175, 0.885, 0.32, 1.275) 轻微回弹 微交互、轻奢感 ★★★★☆

二、transform 变换（动画性能之王）

transform 是目前公认性能最好的动画属性，因为它只影响合成层（composite layer），基本不会触发重排/重绘。

2.1 常用 transform 函数全家桶

1
2
3
4
5
6
7
8
9
10
11
12
transform: 
  translate(50px, -20%) 
  scale(1.2) 
  rotate(15deg) 
  skew(10deg, 5deg);

/* 3D 常用写法 */
transform: 
  perspective(800px) 
  translate3d(100px, 50px, 60px) 
  rotateX(30deg) 
  rotateY(45deg);

2.2 transform 常用场景推荐

需求 推荐写法 性能 说明
平移 translate3d(x, y, 0) ★★★★★ 开启 GPU 加速首选
缩放 scale(1.2) 或 scale3d(1.2, 1.2, 1) ★★★★★ 非常平滑
旋转 rotate(180deg) / rotateZ(90deg) ★★★★★ 平面旋转
3D 翻转卡片 rotateY(180deg) perspective(1000px) ★★★★☆ 经典 3D 翻牌效果
轻微悬浮+放大 translateY(-8px) scale(1.05) ★★★★★ 按钮/卡片 hover 神器
弹跳感入场 translateY(20px) → translateY(0) + scale ★★★★☆ 配合 keyframes 更明显

三、@keyframes 关键帧动画（复杂动画首选）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 基本结构 */
@keyframes slideUpFade {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 更细致的控制 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100%   { transform: translateY(0); }
  40%                       { transform: translateY(-30px); }
  60%                       { transform: translateY(-15px); }
}

/* 使用方式 */
.element {
  animation: bounce 1.2s ease-out infinite both;
}

3.1 animation 属性完整速查

1
2
3
4
5
6
7
8
9
animation: 
  name               /* 动画名称，必填 */
  duration           /* 时长 */
  timing-function    /* 缓动 */
  delay              /* 延迟 */
  iteration-count    /* 次数：infinite | 数字 */
  direction          /* normal | reverse | alternate | alternate-reverse */
  fill-mode          /* none | forwards | backwards | both */
  play-state;        /* running | paused */

常用组合

1
2
3
animation: fadeInUp 0.8s ease-out both;
animation: heartBeat 1.2s ease-in-out infinite;
animation: loading 2s linear infinite;

四、性能优化核心要点（面试/项目必背）

属性组合 是否触发重排 是否触发重绘 是否触发合成 性能评价
transform + opacity × × ✓✓✓ ★★★★★
transform (translate3d) × × ✓✓✓ ★★★★★
opacity × ✓ ✓✓ ★★★★☆
left/top/width/height ✓✓✓ ✓ × ★☆☆☆☆
margin/padding ✓✓✓ ✓ × ★☆☆☆☆
filter/blur × ✓✓ ✓✓ ★★★☆☆

4.1 强制开启 GPU 加速的经典 hack（现代项目仍常用）

1
2
3
will-change: transform;
transform: translateZ(0);           /* 或 translate3d(0,0,0) */
backface-visibility: hidden;        /* 有时配合使用，避免闪烁 */

五、transition vs animation 对比决策表

维度 transition @keyframes / animation
适用场景 简单的状态切换（hover/focus/active） 复杂序列、入场出场、循环动画
控制精度 只有首尾两帧 可精确控制多个关键帧
性能 极高（浏览器优化更好） 高（但写法复杂时容易掉帧）
书写复杂度 非常简单 较复杂
支持循环 不支持 支持（infinite + alternate）
2025-2026 推荐使用比例 约 70~80% 约 20~30%（需要叙事感/复杂动效时）