CSS3 过渡 (Transitions) 和动画 (Animations) 深度教程

作为一名资深前端动画和交互设计师，我将带你深入探索 CSS3 的核心动态表现能力：过渡 (Transitions) 和动画 (Animations)。它们是让网页元素从静态到生动、从无趣到吸引的关键技术，能够极大地提升用户体验，并减少对 JavaScript 的依赖。

前置知识： 理解 CSS 属性，特别是 transform 和 opacity 等可动画属性。了解基本的 CSS 选择器。

一、CSS 过渡 (Transitions)

讲解： CSS 过渡允许你在元素属性从一个状态平滑地变为另一个状态时，定义一个动画效果。它通常由用户交互（如鼠标悬停、点击）或 JavaScript 动态改变样式触发。过渡是“由 A 到 B”的简单动画。

1.1 过渡属性详解

过渡效果通过以下四个核心属性来定义：

transition-property

作用： 指定哪些 CSS 属性将应用过渡效果。只有可动画的 CSS 属性才能被过渡。
- all (默认): 所有可动画属性都将进行过渡。
- none: 不进行任何过渡。
- <property-name>: 指定一个或多个要过渡的 CSS 属性名称，用逗号分隔，例如 background-color, transform, opacity。
```
.element {
    transition-property: background-color; /* 只过渡背景色 */
}

.element-complex {
    transition-property: transform, opacity; /* 过渡变换和透明度 */
}
```
transition-duration

作用： 定义过渡效果持续的时间。这是必不可少的属性。
- <time>: 以秒 (s) 或毫秒 (ms) 为单位，例如 0.5s 或 500ms。
```
.element {
    transition-duration: 0.5s; /* 过渡持续 0.5 秒 */
}
```
transition-timing-function

作用： 定义过渡动画的速度曲线，即动画在整个持续时间内的变化速度。这决定了动画的“感觉”。
- ease (默认): 慢速开始，然后加速，最后慢速结束（常用的平滑效果）。
- linear: 匀速运动。
- ease-in: 慢速开始，然后加速。
- ease-out: 先加速，然后慢速结束。
- ease-in-out: 慢速开始和结束，中间加速。
- cubic-bezier(n, n, n, n): 自定义贝塞尔曲线。接受四个 0 到 1 之间的数值，这提供了极大的灵活性来创建独特的加速/减速模式。
- steps(n, <direction>): 将动画分解为 N 个等长的时间间隔，每次动画进行时，属性值会跳跃式变化。direction 可以是 start 或 end。
```
.element {
    transition-timing-function: ease-in-out; /* 慢速开始和结束 */
}

.element-custom {
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* 自定义贝塞尔曲线 */
}
```
transition-delay

作用： 定义过渡效果开始前的延迟时间。
- <time>: 以秒 (s) 或毫秒 (ms) 为单位，例如 0.2s 或 200ms。
```
.element {
    transition-delay: 0.2s; /* 延迟 0.2 秒后开始过渡 */
}
```

`transition` (复合属性)

作用： 用于一次性设置所有过渡属性的简写形式。这是最常用的方式。

语法：transition: [property] [duration] [timing-function] [delay];

可以为多个属性设置不同的过渡效果，用逗号分隔：

.element {
    /* 背景色过渡 0.5s ease-out，无延迟 */
    /* 变换过渡 0.3s ease-in，无延迟 */
    /* 边框圆角过渡 0.4s linear，无延迟 */
    transition: background-color 0.5s ease-out, transform 0.3s ease-in, border-radius 0.4s linear;
}

/* 简写所有属性：属性名 时间 曲线 延迟 */
.element-all {
    transition: all 0.6s ease-in-out 0.1s;
}

1.2 过渡工作原理

graph TD A[初始状态（CSS Rule 1）] -- 用户交互/JS改变样式 --> B[目标状态（CSS Rule 2）] B --> C{元素是否设置了 Transition?} C -- No --> D[直接跳变] C -- Yes --> E[根据 transition-property, transition-duration, transition-timing-function, transition-delay 进行平滑过渡] E --> F[动画结束]

1.3 示例：交互式按钮与方块

我们将创建一个方块，并在鼠标悬停时改变其背景色、大小和形状，同时应用不同的过渡效果。

<div class="transition-box">悬停我</div>

<style>
.transition-box {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* 定义过渡：背景色 0.5s ease-out，形变 0.3s ease-in，圆角 0.4s linear */
    transition: background-color 0.5s ease-out, transform 0.3s ease-in, border-radius 0.4s linear;
}

.transition-box:hover {
    background-color: #dc3545; /* 悬停时改变背景色 */
    transform: scale(1.2) rotate(15deg); /* 悬停时放大并旋转 */
    border-radius: 50%; /* 悬停时变为圆形 */
}
</style>

过渡示例：交互式方块

悬停我

说明： 鼠标悬停在方块上，背景色、大小、旋转和圆角都会以不同的速度和曲线平滑过渡。移开鼠标时，也会平滑地恢复原状。

1.4 示例：过渡速度曲线对比

通过对比不同的 transition-timing-function，可以直观地感受动画速度曲线的差异。

<div class="timing-function-container">
    <p>悬停在下方容器上，观察不同方块的移动速度：</p>
    <div class="timing-function-box" id="ease">ease (默认)</div>
    <div class="timing-function-box" id="linear">linear</div>
    <div class="timing-function-box" id="ease-in">ease-in</div>
    <div class="timing-function-box" id="ease-out">ease-out</div>
    <div class="timing-function-box" id="ease-in-out">ease-in-out</div>
    <div class="timing-function-box" id="cubic-bezier">cubic-bezier(0.68, -0.55, 0.265, 1.55)</div>
</div>

<style>
.timing-function-container {
    width: 300px;
    height: 350px;
    border: 1px dashed #ccc;
    padding: 10px;
    overflow: hidden; /* 防止盒子移出时撑开容器 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}
.timing-function-box {
    width: 60px;
    height: 60px;
    background-color: #28a745;
    margin: 10px;
    border-radius: 5px;
    transition: transform 1s; /* 统一过渡时间 */
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8em;
}
.timing-function-container:hover .timing-function-box {
    transform: translateX(150px); /* 悬停时向右移动 150px */
}
#ease { transition-timing-function: ease; }
#linear { transition-timing-function: linear; }
#ease-in { transition-timing-function: ease-in; }
#ease-out { transition-timing-function: ease-out; }
#ease-in-out { transition-timing-function: ease-in-out; }
#cubic-bezier { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); background-color: #ffc107; }
</style>

过渡速度曲线对比

悬停在下方容器上，观察不同方块的移动速度：

ease (默认)

linear

ease-in

ease-out

ease-in-out

cubic-bezier

说明： 悬停在白色虚线框内，每个方块会向右移动，但其速度变化模式各不相同。特别是 cubic-bezier 示例，可能会有“超出”再“回弹”的效果。

过渡限制：

只有“可动画属性”（animatable properties）才能被过渡。例如 color, font-size, width, opacity, transform 等。像 display: none 到 block 或 position: absolute 到 relative 这样的属性是无法过渡的。
过渡只能在两个明确的样式状态之间进行，无法定义复杂的动画序列。

二、CSS 动画 (Animations)

讲解： CSS 动画比过渡更强大和灵活，它允许你定义复杂的、多步骤的动画序列，无需用户交互即可自动播放、循环播放，并提供更多控制选项。动画由两部分组成：@keyframes 规则定义动画序列，animation 属性将动画应用到元素。

2.1 `@keyframes` 规则

作用： @keyframes 规则定义了一个动画的序列，包括动画的起始状态、中间状态和结束状态。这些状态被称为“关键帧”。

/* 简单示例：从透明度 0 到 1 */
@keyframes fadeIn {
    from { /* 或 0% */
        opacity: 0;
    }
    to { /* 或 100% */
        opacity: 1;
    }
}

/* 复杂示例：多步骤动画 */
@keyframes slideBounce {
    0% { /* 动画开始时 */
        transform: translateX(-100px);
        opacity: 0;
    }
    50% { /* 动画进行到一半时 */
        transform: translateX(20px); /* 向前超出一点 */
        opacity: 1;
    }
    100% { /* 动画结束时 */
        transform: translateX(0); /* 回到原位 */
    }
}

2.2 动画属性详解

将 @keyframes 定义的动画应用到元素上，需要使用 animation 属性及其子属性。

animation-name

作用： 引用 @keyframes 定义的动画名称。这是将动画与元素关联的唯一方式。
```
.element {
    animation-name: fadeIn; /* 应用名为 fadeIn 的动画 */
}
```
animation-duration

作用： 动画一个周期持续的时间。

语法与 transition-duration 相同。
```
.element {
    animation-duration: 2s; /* 动画持续 2 秒 */
}
```
animation-timing-function

作用： 定义动画在整个持续时间内的速度曲线。

语法与 transition-timing-function 相同。
```
.element {
    animation-timing-function: ease-in-out; /* 动画速度曲线 */
}
```
animation-delay

作用： 动画开始前的延迟时间。

语法与 transition-delay 相同。
```
.element {
    animation-delay: 0.5s; /* 延迟 0.5 秒后开始动画 */
}
```
animation-iteration-count

作用： 动画的播放次数。
- <number>: 播放特定次数，例如 3。
- infinite: 动画无限循环播放。
```
.element {
    animation-iteration-count: infinite; /* 无限循环 */
}
```
animation-direction

作用： 定义动画在每个周期是否反向播放。
- normal (默认): 每次动画都从 0% 到 100% 顺序播放。
- reverse: 每次动画都从 100% 到 0% 反向播放。
- alternate: 第一次从 0% 到 100%，第二次从 100% 到 0%，如此交替。
- alternate-reverse: 第一次从 100% 到 0%，第二次从 0% 到 100%，如此交替。
```
.element {
    animation-direction: alternate; /* 交替播放 */
}
```
animation-fill-mode

作用： 定义动画执行前和执行后元素的样式。这解决了动画结束后元素跳回原始状态的问题。
- none (默认): 动画不应用任何样式，动画结束后元素会恢复到它被应用动画前的状态。
- forwards: 动画结束后，元素会保持动画最后一帧 (100% 或 to) 的样式。
- backwards: 动画开始前（在延迟期间），元素立即应用动画第一帧 (0% 或 from) 的样式。
- both: 同时应用 forwards 和 backwards 的效果。
```
.element {
    animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
}
```
animation-play-state

作用： 控制动画的播放状态。
- running (默认): 动画正在播放。
- paused: 动画暂停。可以通过 JavaScript 动态改变此属性来控制动画播放/暂停。
```
.element {
    animation-play-state: paused; /* 动画暂停 */
}
```
animation (复合属性)

作用： 用于一次性设置所有动画属性的简写形式。这是最常用的方式。

语法：animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
```
.element {
    /* 动画名为 slideIn，持续 1.5s，ease-out 曲线，无限次播放，交替方向，动画结束后保持最后一帧 */
    animation: slideIn 1.5s ease-out infinite alternate forwards;
}
```

2.3 动画工作原理

graph TD A[定义 @keyframes 动画序列] --> B{应用 animation 属性到元素} B --> C[animation-name （关联动画）] B --> D[animation-duration （多长时间）] B --> E[animation-timing-function （怎么动）] B --> F[animation-delay （什么时候动）] B --> G[animation-iteration-count （动几次）] B --> H[animation-direction （怎么重复动）] B --> I[animation-fill-mode （动前后状态）] B --> J[animation-play-state （动还是停）] J --> K[动画在浏览器中渲染]

2.4 示例：页面加载时的进入动画

我们创建一个在页面加载时从左侧滑入并带有弹跳效果的元素。

<div class="animation-item">Hello!</div>

<style>
@keyframes slideIn {
    0% { /* 初始状态：完全透明，在左侧屏幕外 */
        opacity: 0;
        transform: translateX(-100%);
    }
    70% { /* 中间状态：完全不透明，向右超出一点 */
        opacity: 1;
        transform: translateX(20%);
    }
    100% { /* 最终状态：回到原位 */
        transform: translateX(0);
    }
}

.animation-item {
    width: 80px;
    height: 80px;
    background-color: #6f42c1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* 应用动画：slideIn 动画，持续 1.5s，动画结束后保持最终状态，使用 ease-out 曲线 */
    animation: slideIn 1.5s forwards ease-out;
}
</style>

动画示例：进入效果

Hello!

说明： 刷新页面或重新加载此部分，你会看到“Hello!”方块从左侧滑入，并在停止前有一个小小的回弹效果。

2.5 示例：无限循环的弹跳动画

创建一个不断上下弹跳的圆形盒子。

<div class="bounce-box">Bounce!</div>

<style>
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { /* 动画的几个关键帧都在底部 */
        transform: translateY(0);
    }
    40% { /* 动画进行到 40% 时，跳到最高点 */
        transform: translateY(-30px);
    }
    60% { /* 动画进行到 60% 时，回到中间点 */
        transform: translateY(-15px);
    }
}

.bounce-box {
    width: 80px;
    height: 80px;
    background-color: #17a2b8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2em;
    /* 应用动画：bounce 动画，持续 2s，无限循环，使用 ease-out 曲线 */
    animation: bounce 2s infinite ease-out;
}
</style>

动画示例：无限循环弹跳

Bounce!

说明： 圆形盒子会不断地上下弹跳，展示了 infinite 和多关键帧的应用。

2.6 示例：3D 动画 - 自动旋转的立方体

结合 CSS 3D 转换和动画，创建一个在 3D 空间中自动旋转的立方体。

<div class="cube-scene">
    <div class="cube-3d">
        <div class="cube-face-3d front">1</div>
        <div class="cube-face-3d back">6</div>
        <div class="cube-face-3d right">3</div>
        <div class="cube-face-3d left">4</div>
        <div class="cube-face-3d top">2</div>
        <div class="cube-face-3d bottom">5</div>
    </div>
</div>

<style>
@keyframes rotate3D {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    100% { transform: rotateY(360deg) rotateX(360deg); } /* 绕 Y 和 X 轴同时旋转 */
}

.cube-scene {
    width: 120px;
    height: 120px;
    perspective: 600px; /* 定义视距 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}
.cube-3d {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d; /* 保持子元素在 3D 空间 */
    animation: rotate3D 5s infinite linear; /* 应用 3D 旋转动画 */
}
.cube-face-3d {
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 1.5em;
    color: white;
    background: rgba(0, 123, 255, 0.8);
    border: 1px solid rgba(0,0,0,0.1);
    backface-visibility: hidden; /* 隐藏背面，避免穿透 */
    box-sizing: border-box;
}
/* 各个面的定位和旋转，使其构成一个立方体 */
.cube-face-3d.front  { background: #dc3545; transform: rotateY(0deg) translateZ(40px); }
.cube-face-3d.back   { background: #007bff; transform: rotateY(180deg) translateZ(40px); }
.cube-face-3d.right  { background: #28a745; transform: rotateY(90deg) translateZ(40px); }
.cube-face-3d.left   { background: #ffc107; transform: rotateY(-90deg) translateZ(40px); }
.cube-face-3d.top    { background: #6f42c1; transform: rotateX(90deg) translateZ(40px); }
.cube-face-3d.bottom { background: #fd7e14; transform: rotateX(-90deg) translateZ(40px); }
</style>

动画示例：3D 旋转立方体

说明： 这是一个自动旋转的 3D 立方体，结合了 perspective, transform-style: preserve-3d 和 @keyframes 动画。

三、性能与最佳实践

CSS 动画通常由浏览器进行优化，并可能利用 GPU 加速，但仍需注意性能。

使用 transform 和 opacity 优先

这些属性的改变不会引起页面的回流 (reflow) 或重绘 (repaint)，它们只引起合成 (compositing) 阶段的像素变化，性能最好。应尽量避免动画化 width, height, top, left, margin, padding 等会影响布局的属性，因为它们会触发昂贵的回流操作。
谨慎使用 will-change

will-change 属性可以告诉浏览器元素将要发生哪些变化，让浏览器提前进行优化。但滥用此属性可能导致性能下降，因为它会消耗大量内存。仅在动画开始前添加，动画结束后移除。
```
.element {
    will-change: transform, opacity; /* 告诉浏览器 transform 和 opacity 将会改变 */
    transition: transform 0.5s;
}
```
动画的平滑性

选择合适的 timing-function 对动画的平滑性至关重要。ease-in-out 或自定义 cubic-bezier 曲线通常能提供更自然流畅的动画体验。
避免过度复杂

虽然 CSS 动画功能强大，但过度复杂的动画或同时运行大量动画仍可能导致性能问题。保持动画简洁、目的明确。
浏览器开发者工具

利用浏览器开发者工具（如 Chrome DevTools 的 Performance 和 Animation 面板）来调试和优化 CSS 动画，观察动画的帧率和渲染层。

四、过渡与动画的选择

两者都有其适用场景，理解它们的差异有助于做出正确的选择：

特性	CSS Transitions (过渡)	CSS Animations (动画)
触发方式	由属性值变化触发（如 `:hover` 或 JS 改变样式）。	自动播放，或通过 JS 控制播放/暂停/反向。
动画步骤	只有起始和结束两个状态（A 到 B）。	可以通过 `@keyframes` 定义多个中间状态，形成复杂序列。
循环控制	无法直接循环。	可以通过 `animation-iteration-count: infinite;` 实现无限循环。
播放方向	单向（A 到 B）。	可以通过 `animation-direction: alternate;` 等实现交替播放。
动画结束状态	默认恢复原始状态。	可以通过 `animation-fill-mode` 控制动画结束后是否保持最后一帧状态。
适用场景	简单的 UI 交互效果，如按钮悬停、菜单展开/折叠、状态切换等。	复杂的页面加载动画、轮播图、加载指示器、卡通效果、自播放的背景动画等。

五、总结

CSS 过渡和动画是现代前端开发中不可或缺的工具。它们为网页带来了生命力，提供了流畅的用户体验，并且在性能方面通常优于传统的 JavaScript 动画。掌握它们不仅能让你创建更具吸引力的界面，还能让你更好地理解浏览器如何渲染和优化视觉变化。

在实际项目中，你经常会发现过渡和动画是相互补充的。简单、即时的交互效果可以使用过渡，而复杂、自动播放或需要精确时间控制的序列则更适合使用动画。通过灵活运用这些 CSS 特性，你将能够设计出更生动、更富有表现力的 Web 应用。

感谢您的阅读，祝您在 CSS 动画的创作之路上越走越远！

CSS3 过渡 (Transitions) 和动画 (Animations) 深度教程

一、CSS 过渡 (Transitions)

1.1 过渡属性详解

`transition-property`

`transition-duration`

`transition-timing-function`

`transition-delay`

`transition` (复合属性)

1.2 过渡工作原理

1.3 示例：交互式按钮与方块

过渡示例：交互式方块

1.4 示例：过渡速度曲线对比

过渡速度曲线对比

二、CSS 动画 (Animations)

2.1 `@keyframes` 规则

2.2 动画属性详解

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

`animation-fill-mode`

`animation-play-state`

`animation` (复合属性)

2.3 动画工作原理

2.4 示例：页面加载时的进入动画

动画示例：进入效果

2.5 示例：无限循环的弹跳动画

动画示例：无限循环弹跳

2.6 示例：3D 动画 - 自动旋转的立方体

动画示例：3D 旋转立方体

三、性能与最佳实践

使用 `transform` 和 `opacity` 优先

谨慎使用 `will-change`

动画的平滑性

避免过度复杂

浏览器开发者工具

四、过渡与动画的选择

五、总结

CSS3 过渡 (Transitions) 和 动画 (Animations) 深度教程

一、CSS 过渡 (Transitions)

1.1 过渡属性详解

transition-property

transition-duration

transition-timing-function

transition-delay

transition (复合属性)

1.2 过渡工作原理

1.3 示例：交互式按钮与方块

过渡示例：交互式方块

1.4 示例：过渡速度曲线对比

过渡速度曲线对比

二、CSS 动画 (Animations)

2.1 @keyframes 规则

2.2 动画属性详解

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

animation (复合属性)

2.3 动画工作原理

2.4 示例：页面加载时的进入动画

动画示例：进入效果

2.5 示例：无限循环的弹跳动画

动画示例：无限循环弹跳

2.6 示例：3D 动画 - 自动旋转的立方体

动画示例：3D 旋转立方体

三、性能与最佳实践

使用 transform 和 opacity 优先

谨慎使用 will-change

动画的平滑性

避免过度复杂

浏览器开发者工具

四、过渡与动画的选择

五、总结

CSS3 过渡 (Transitions) 和动画 (Animations) 深度教程

`transition-property`

`transition-duration`

`transition-timing-function`

`transition-delay`

`transition` (复合属性)

2.1 `@keyframes` 规则

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

`animation-fill-mode`

`animation-play-state`

`animation` (复合属性)

使用 `transform` 和 `opacity` 优先

谨慎使用 `will-change`

目录导航

CSS3 过渡 (Transitions) 和 动画 (Animations) 深度教程

预览结果：

CSS3 过渡 (Transitions) 和动画 (Animations) 深度教程