前言#

CSS3 中，**过渡（Transition）和动画（Animation）**都能让元素产生动态效果，但两者的使用场景不同。

过渡：让元素从一种样式平滑变化到另一种样式，通常需要触发条件。
动画：通过关键帧定义一系列样式变化，可以自动播放，也可以循环播放。

过渡的基本使用#

什么是过渡#

CSS 过渡（Transition）用于控制元素的样式从一个状态变化到另一个状态时的过程，而不是瞬间完成变化。

例如，鼠标移入盒子时，让背景颜色在 1 秒内逐渐从红色变为蓝色。

1
<div class="box"></div>
2
.box {
3
  width: 100px;
4
  height: 100px;
5
  background-color: red;
6

7
  transition: background-color 1s;
8
}
9

10
.box:hover {
11
  background-color: blue;
12
}

没有 transition 时，颜色立即改变；添加之后，颜色会平滑变化。

transition 的基本属性#

属性	作用	示例
`transition-property`	指定需要过渡的属性	`width`
`transition-duration`	设置过渡持续时间	`1s`
`transition-timing-function`	设置过渡的速度曲线	`ease`
`transition-delay`	设置过渡开始前的等待时间	`0.5s`
`transition`	以上属性的简写	`all 1s ease`

transition-property：指定哪些 CSS 属性需要执行过渡。

1
.box {
2
  transition-property: width;
3
}
4
 /* 多个属性可以使用逗号分隔  */
5
.box {
6
  transition-property: width, background-color;
7
}
8
 /* 使用 all 表示所有可过渡的属性 */
9
.box {
10
  transition-property: all;
11
}

注意：并非所有 CSS 属性都可以平滑过渡，例如 display: none 到 display: block 在普通情况下不会产生连续的过渡效果。

**transition-duration：**设置过渡持续时间，单位为 s 或 ms。

1
.box {
2
  transition-duration: 1s;
3
}

1s：1 秒
500ms：500 毫秒
0.5s：0.5 秒

**transition-delay：**设置过渡开始前的延迟时间。

1
.box {
2
  transition-delay: 0.5s;
3
}

表示触发状态变化后，等待 0.5 秒才开始过渡

transition 简写

基本语法：

1
transition: 属性 持续时间 缓动函数 延迟时间;

例如：

1
.box {
2
  transition: width 1s ease 0.5s;
3
}

表示宽度变化时，延迟 0.5 秒，然后使用 ease 曲线执行 1 秒的过渡。

还可以设置多个属性：

1
.box {
2
  transition:
3
    width 1s ease,
4
    background-color 0.5s linear,
5
    transform 0.3s ease;
6
}

过渡完整示例#

1
.container {
2
    width: 260px;
3
    height: 160px;
4
    padding: 20px;
5
    box-sizing: border-box;
6
}
7

8
.box {
9
    width: 100px;
10
    height: 100px;
11
    background-color: red;
12
    border-radius: 0;
13

14
    transition:
15
        transform 0.6s ease,
16
        background-color 0.6s ease,
17
        border-radius 0.6s ease;
18
}
19

20
.container:hover .box {
21
    transform: translateX(100px) rotate(30deg);
22
    background-color: blue;
23
    border-radius: 50%;
24
}
25
<div class="container">
26
  <div class="box"></div>
27
</div>

开发注意：

transition 通常写在元素的基础样式中，而不是只写在 :hover 中，这样移入和移出时都能平滑过渡。
现代开发中，优先使用 transform 和 opacity 实现位移、缩放与淡入淡出，通常性能更好。
过渡不只能够通过 :hover 触发，也能通过 :focus、修改 class、JavaScript 修改样式等方式触发。
当元素需要发生较大位移、旋转或缩放时，尽量不要让正在运动的元素自己承担 :hover 触发条件。这是 CSS 过渡动画中很典型的交互陷阱。

过渡的缓动效果#

什么是缓动效果：缓动效果通过 transition-timing-function 控制过渡过程中变化的快慢。例如，同样是 1 秒完成 200px 位移，可以匀速移动，也可以先快后慢。

常见缓动函数

属性值	作用
`ease`	默认值，先加速后减速
`linear`	匀速变化
`ease-in`	慢速开始，逐渐加速
`ease-out`	快速开始，逐渐减速
`ease-in-out`	慢速开始，慢速结束
`cubic-bezier()`	自定义贝塞尔曲线
`steps()`	将过渡划分成离散步骤

cubic-bezier() 自定义缓动：cubic-bezier() 用于自定义三次贝塞尔缓动曲线。

语法：

1
transition-timing-function: cubic-bezier(x1, y1, x2, y2);

其中四个参数表示两个控制点的坐标，x1 和 x2 必须在 0～1 之间。

常见预设对应的曲线：

1
/* 匀速 */
2
linear
3
/* 等效于 */
4
cubic-bezier(0, 0, 1, 1);
5

6
/* 默认缓动 */
7
ease
8
/* 等效于 */
9
cubic-bezier(0.25, 0.1, 0.25, 1);
10

11
/* 慢速开始 */
12
ease-in
13
/* 等效于 */
14
cubic-bezier(0.42, 0, 1, 1);
15

16
/* 快速开始，慢速结束 */
17
ease-out
18
/* 等效于 */
19
cubic-bezier(0, 0, 0.58, 1);

实际开发中，不需要手动推导贝塞尔曲线。可以使用 cubic-bezier.com 可视化调试。

steps() 步进函数#

steps() 让变化以离散的步骤完成，而不是连续、平滑地变化。

1
.box {
2
  transition: transform 2s steps(4, end);
3
}
4

5
.box:hover {
6
  transform: translateX(200px);
7
}

表示在 2 秒内分 4 步完成位移。

常用于逐帧效果、数字跳动、打字机效果等场景。

动画的定义和调用#

什么是 CSS 动画#

CSS 动画（Animation）使用 @keyframes 定义关键帧，然后使用 animation 属性将动画应用到元素。与过渡不同，动画可以不依赖状态改变而自动执行，也可以循环播放。

使用 @keyframes 定义动画#

基本语法：

1
@keyframes 动画名称 {
2
  from {
3
    /* 初始状态 */
4
  }
5

6
  to {
7
    /* 结束状态 */
8
  }
9
}

例如：

1
@keyframes move {
2
  from {
3
    transform: translateX(0);
4
  }
5

6
  to {
7
    transform: translateX(200px);
8
  }
9
}

也可以使用百分比定义多个关键帧：

1
@keyframes move {
2
  0% {
3
    transform: translateX(0);
4
  }
5

6
  50% {
7
    transform: translateX(100px);
8
  }
9

10
  100% {
11
    transform: translateX(200px);
12
  }
13
}

这里的 0%、50%、100% 表示动画时间进度，而不是元素位置的百分比。

使用 animation 调用动画#

定义动画后，需要通过 animation 将动画应用到元素。

1
.box {
2
  animation-name: move;
3
  animation-duration: 2s;
4
}

表示元素执行名为 move 的动画，持续时间 2 秒。

animation 的常用属性

属性	作用	示例
`animation-name`	动画名称	`move`
`animation-duration`	动画持续时间	`2s`
`animation-timing-function`	动画缓动曲线	`ease`
`animation-delay`	动画延迟时间	`1s`
`animation-iteration-count`	动画播放次数	`3`、`infinite`
`animation-direction`	动画播放方向	`alternate`
`animation-fill-mode`	动画前后应用的样式	`forwards`
`animation-play-state`	动画播放状态	`paused`、`running`
`animation`	动画简写属性	`move 2s ease infinite`

animation-iteration-count：控制动画播放次数。

1
.box {
2
  animation-iteration-count: 3;
3
}

表示播放 3 次。

1
.box {
2
  animation-iteration-count: infinite;
3
}

表示无限循环。

animation-direction：控制动画播放方向。

属性值	说明
`normal`	正常播放，默认值
`reverse`	反向播放
`alternate`	正向、反向交替播放
`alternate-reverse`	反向、正向交替播放

例如：

1
.box {
2
  animation-direction: alternate;
3
}

第一次从起点到终点，第二次从终点返回起点。

animation-fill-mode：控制动画执行前和结束后，是否应用关键帧中的样式。

属性值	说明
`none`	默认值，不额外保留关键帧样式
`forwards`	结束后保留最后执行的关键帧样式
`backwards`	延迟等待阶段应用起始关键帧样式
`both`	同时具有 forwards 和 backwards 的效果

例如：

1
.box {
2
  animation: move 2s ease forwards;
3
}

动画结束之后，元素继续保持动画结束时的视觉状态。

注意：forwards 不会真正修改元素的普通 CSS 属性值，只是让动画效果继续参与样式计算。

animation-play-state：控制动画播放或暂停。

1
.box {
2
  animation-play-state: running;
3
}
4

5
.box:hover {
6
  animation-play-state: paused;
7
}

鼠标移入时暂停动画，移出后继续播放。

animation 简写

基本语法：

1
animation: 名称 时长 缓动函数 延迟 次数 方向 填充模式;

示例：

1
.box {
2
  animation: move 2s ease 0.5s infinite alternate;
3
}

表示调用 move 动画，延迟 0.5 秒，执行 2 秒，无限循环，并交替播放方向。多个动画也可以一起使用：

1
.box {
2
  animation:
3
    move 2s ease infinite alternate,
4
    fade 1s linear infinite alternate;
5
}

动画完整示例#

1
.box {
2
  width: 100px;
3
  height: 100px;
4
  background-color: blue;
5

6
  animation: move 2.5s ease-in-out infinite alternate;
7
}
8

9
@keyframes move {
10
  0% {
11
    transform: translateX(0) rotate(0);
12
    background-color: blue;
13
  }
14

15
  50% {
16
    transform: translateX(100px) rotate(90deg);
17
    background-color: purple;
18
  }
19

20
  100% {
21
    transform: translateX(200px) rotate(180deg);
22
    background-color: green;
23
    border-radius: 50%;
24
  }
25
}

实际开发中的常见动画#

淡入动画#

1
@keyframes fadeIn {
2
  from {
3
    opacity: 0;
4
  }
5

6
  to {
7
    opacity: 1;
8
  }
9
}
10

11
.box {
12
  animation: fadeIn 0.5s ease-out;
13
}

旋转加载动画#

1
@keyframes rotate {
2
  to {
3
    transform: rotate(360deg);
4
  }
5
}
6

7
.loading {
8
  animation: rotate 1s linear infinite;
9
}

上下浮动动画#

1
@keyframes float {
2
  0%,
3
  100% {
4
    transform: translateY(0);
5
  }
6

7
  50% {
8
    transform: translateY(-15px);
9
  }
10
}
11

12
.box {
13
  animation: float 2s ease-in-out infinite;
14
}

总结#

Transition 与 Animation 的区别

对比	Transition（过渡）	Animation（动画）
是否需要触发	通常需要状态变化	可以自动执行
定义方式	`transition`	`@keyframes` + `animation`
变化过程	两个状态间的过渡	可以定义多个关键帧
循环播放	不直接支持循环次数	支持 `infinite`
播放方向	随状态变化决定	支持方向设置
暂停控制	无专门暂停属性	`animation-play-state`
典型场景	按钮悬停、菜单展开	Loading、呼吸灯、循环动效

开发建议

在 Vue3、React 等现代前端项目中，通常按照以下方式选择：

按钮 Hover、导航栏高亮、卡片悬浮：使用 transition。
Loading 加载、循环旋转、呼吸灯：使用 animation。
弹窗进入退出、组件显示隐藏：通常通过组件状态切换配合 CSS 过渡或动画实现。
复杂的连续交互、精细时间轴控制：可以考虑 Web Animations API 或专门的动画库。

核心记忆：

transition 负责两个状态之间的平滑变化，@keyframes 负责定义动画过程，animation 负责调用和控制动画。

掌握这三者，以及 ease、duration、delay 和 transform 的组合，就足以完成大多数常见网页交互动效。

音乐

音乐

前言#

过渡的基本使用#

什么是过渡#

transition 的基本属性#

过渡完整示例#

过渡的缓动效果#

steps() 步进函数#

动画的定义和调用#

什么是 CSS 动画#

使用 @keyframes 定义动画#

使用 animation 调用动画#

动画完整示例#

实际开发中的常见动画#

淡入动画#

旋转加载动画#

上下浮动动画#

总结#

文章分享

评论区

音乐

CSS3中的transition属性过渡与动画

前言#

过渡的基本使用#

什么是过渡#

transition 的基本属性#

过渡完整示例#

过渡的缓动效果#

steps() 步进函数#

动画的定义和调用#

什么是 CSS 动画#

使用 @keyframes 定义动画#

使用 animation 调用动画#

动画完整示例#

实际开发中的常见动画#

淡入动画#

旋转加载动画#

上下浮动动画#

总结#

文章分享

评论区