CSS动画入门教程 – wiki基地

CSS动画入门教程：让你的网页动起来！

在当今的网页设计中，静态页面已经难以满足用户对于交互和视觉体验的更高要求。动画不仅能让网页看起来更生动、更具吸引力，还能有效引导用户注意力，增强用户体验。CSS动画作为前端开发中的核心技术之一，以其性能优异、语法简洁的特点，成为了实现网页动态效果的首选。

本教程将带你从零开始，系统学习CSS动画的基础知识，并深入探讨其各个属性和应用场景。无论你是前端新手，还是希望提升网页动效技能的设计师，本文都将为你提供一份全面且易于理解的指南。

1. 为什么选择CSS动画？

在探讨如何制作动画之前，我们先来了解一下为什么CSS动画是如此受欢迎：

性能优异： 现代浏览器通常会将CSS动画（特别是 transform 和 opacity 属性的动画）交给GPU进行硬件加速，这意味着动画的运行会更加流畅，不占用CPU资源，减少主线程的阻塞。
易于上手： CSS动画的语法相对简单，不需要复杂的JavaScript知识即可实现丰富的效果。
兼容性好： 现代浏览器对CSS动画的支持非常完善，只需注意一些旧版本浏览器的兼容性前缀。
维护性强： 动画逻辑与HTML结构、JavaScript行为分离，代码组织清晰，易于维护。

虽然JavaScript也可以实现动画效果，但在大多数情况下，对于简单的UI交互和视觉效果，CSS动画是更高效、更简洁的选择。

2. 前置知识

在开始学习CSS动画之前，你需要具备以下基础知识：

HTML基础： 了解HTML标签、元素、属性等。
CSS基础： 熟悉CSS选择器、盒模型、常用属性（如width、height、background、color、transform、opacity等）。
浏览器开发者工具： 了解如何使用浏览器开发者工具检查元素、查看CSS样式等，这将对调试动画非常有帮助。

3. CSS动画的核心：`@keyframes` 规则

CSS动画的魔法始于@keyframes规则。它允许你定义一个动画序列中的关键帧（或称之为“阶段”）。每个关键帧都指定了元素在动画特定时间点的样式。

3.1 `from` / `to` 语法

最简单的@keyframes语法是使用from和to关键字，它们分别代表动画的起始状态（0%）和结束状态（100%）。

语法：

css @keyframes animationName { from { /* 动画起始状态的CSS属性 */ } to { /* 动画结束状态的CSS属性 */ } }

animationName：你为这个动画序列定义的唯一名称。这个名称将在后面用来引用并应用到元素上。

示例：一个简单的颜色渐变动画

HTML:

“`html

“`

CSS:

“`css
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}

/ 定义一个名为 ‘colorChange’ 的关键帧动画 /
@keyframes colorChange {
from {
background-color: blue; / 从蓝色开始 /
}
to {
background-color: red; / 渐变为红色结束 /
}
}
“`

仅仅定义了@keyframes规则并不会让元素动起来，你还需要将这个动画应用到元素上，这将在下一节详细讲解。

3.2 百分比语法

对于更复杂的动画，你可能需要定义多个中间状态。这时，你可以使用百分比来精确控制动画在不同时间点的样式。

语法：

css @keyframes animationName { 0% { /* 动画开始时的样式 */ } 25% { /* 动画进行到25%时的样式 */ } 50% { /* 动画进行到50%时的样式 */ } 100% { /* 动画结束时的样式 */ } }

示例：一个盒子移动、变色、变大的复杂动画

HTML:

“`html

“`

CSS:

“`css
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}

/ 定义一个名为 ‘complexAnimation’ 的关键帧动画 /
@keyframes complexAnimation {
0% {
background-color: blue;
transform: translateX(0) scale(1); / 初始位置和大小 /
}
25% {
background-color: green;
transform: translateX(100px) scale(1.2); / 移动并稍微放大 /
}
50% {
background-color: yellow;
transform: translateX(200px) scale(0.8); / 继续移动，缩小 /
}
75% {
background-color: orange;
transform: translateX(100px) scale(1.5); / 返回并进一步放大 /
}
100% {
background-color: red;
transform: translateX(0) scale(1); / 回到初始位置和大小 /
}
}
“`

关键点：

0%和100%是可选的。如果你不指定0%，动画会从元素的当前样式开始。如果你不指定100%，动画会以最后指定的关键帧样式结束。不过，为了清晰起见，通常建议明确指定0%和100%。
你可以为同一个关键帧定义多个CSS属性。
属性值可以是任何合法的CSS值，包括颜色、长度、百分比、transform函数等。

4. 应用动画：`animation` 属性及其子属性

定义了@keyframes规则之后，你需要使用animation属性（或其独立的子属性）将动画应用到你想要动的元素上。

animation是一个简写属性，它包含了所有控制动画播放方式的子属性。理解这些子属性对于精细控制动画至关重要。

4.1 `animation-name`

作用： 指定要应用的关键帧动画的名称（即 @keyframes 规则中定义的名称）。
值：定义的动画名称。
示例： animation-name: colorChange;

4.2 `animation-duration`

作用： 指定动画完成一次所需的时间。
值：时间单位，如 s (秒) 或 ms (毫秒)。
默认值： 0s (动画不会发生)。
示例： animation-duration: 2s; (2秒完成)

4.3 `animation-timing-function`

作用： 定义动画在每个周期中如何过渡（速度曲线）。它决定了动画从一个状态到另一个状态的速度变化。
值：
- ease (默认值)：慢速开始，然后加速，然后慢速结束。
- linear：匀速播放。
- ease-in：慢速开始，然后加速。
- ease-out：快速开始，然后慢速结束。
- ease-in-out：慢速开始，慢速结束，中间加速。
- cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，可以创建任何你想要的速度曲线。
- steps(integer, start|end)：将动画分解为多个离散的步骤。
  - integer：表示动画将被分解的步数。
  - start：在每个步的开始处完成步长跳跃（默认）。
  - end：在每个步的结束处完成步长跳跃。
示例： animation-timing-function: ease-in-out;

4.4 `animation-delay`

作用： 定义动画开始之前的延迟时间。
值：时间单位，如 s 或 ms。
默认值： 0s (无延迟)。
示例： animation-delay: 1s; (延迟1秒后开始)

4.5 `animation-iteration-count`

作用： 定义动画播放的次数。
值：
- number：播放的次数（例如 2 表示播放两次）。
- infinite：无限循环播放。
默认值： 1 (播放一次)。
示例： animation-iteration-count: infinite;

4.6 `animation-direction`

作用： 定义动画播放的方向。
值：
- normal (默认值)：每次循环都向前播放（从0%到100%）。
- reverse：每次循环都向后播放（从100%到0%）。
- alternate：奇数次循环向前播放，偶数次循环向后播放。
- alternate-reverse：奇数次循环向后播放，偶数次循环向前播放。
示例： animation-direction: alternate;

4.7 `animation-fill-mode`

作用： 定义动画播放之前和之后，元素的样式如何应用。这是动画属性中一个比较容易混淆但也非常强大的属性。
值：
- none (默认值)：动画结束后，元素样式会恢复到动画开始前的状态。
- forwards：动画结束后，元素将保持动画结束时的最后一帧（100% 或 to）的样式。
- backwards：动画开始前，元素会立即应用动画第一帧（0% 或 from）的样式（如果设置了animation-delay，则在延迟期间就应用）。
- both：结合了forwards和backwards的效果。动画开始前应用第一帧样式，结束后保持最后一帧样式。
示例： animation-fill-mode: forwards;

4.8 `animation-play-state`

作用： 控制动画是播放还是暂停。
值：
- running (默认值)：动画正在播放。
- paused：动画暂停。
用途： 通常用于通过JavaScript来控制动画的暂停和播放（例如，鼠标悬停时暂停）。
示例： animation-play-state: paused;

4.9 `animation` 简写属性

所有上述子属性都可以通过一个animation简写属性来设置，其顺序如下（不强制，但推荐）：

css animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

示例：将所有属性组合起来

“`html

“`

“`css
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}

@keyframes fancyAnimation {
0% {
background-color: blue;
transform: translateX(0px) rotate(0deg);
}
50% {
background-color: green;
transform: translateX(200px) rotate(180deg);
}
100% {
background-color: red;
transform: translateX(0px) rotate(360deg);
}
}

.combined-animation {
/ name duration timing delay count direction fill-mode play-state /
animation: fancyAnimation 4s ease-in-out 1s infinite alternate forwards running;
}
“`

这段代码将创建一个盒子，在1秒延迟后，以先慢后快再慢的速度在2秒内从蓝色变到绿色再变红，同时在200px范围内左右移动并旋转，无限次交替播放，并在动画结束后保持最后一帧的样式（尽管是无限循环，forwards在这里主要影响初次播放前后的状态）。

5. 实用动画示例

掌握了核心概念后，让我们通过一些常见的动画效果来巩固学习。

5.1 弹跳球效果

HTML:

“`html

“`

CSS:

“`css
.ball-container {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #ccc;
margin: 50px;
overflow: hidden; / 确保球不会跑出容器 /
}

.ball {
width: 50px;
height: 50px;
background-color: dodgerblue;
border-radius: 50%; / 圆形 /
position: absolute;
bottom: 0; / 初始位置在底部 /
left: 50%;
transform: translateX(-50%); / 水平居中 /
}

@keyframes bounce {
0%, 100% { / 底部 /
transform: translateX(-50%) translateY(0);
}
50% { / 顶部 /
transform: translateX(-50%) translateY(-150px); / 向上弹跳150px /
}
}

.ball {
/ 应用弹跳动画 /
animation: bounce 1.5s ease-out infinite alternate;
/ ease-out 使球落下时加速，看起来更自然 /
/ alternate 使球弹起和落下交替进行 /
}
“`

5.2 脉冲效果（Pulse Effect）

常用于按钮或图标，吸引用户注意。

HTML:

html <button class="pulse-button">点击我</button>

CSS:

“`css
.pulse-button {
padding: 15px 30px;
font-size: 18px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 50px;
transition: transform 0.2s ease; / 为了悬停效果更平滑 /
}

@keyframes pulse {
0% {
transform: scale(1); / 原始大小 /
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); / 初始无阴影 /
}
70% {
transform: scale(1.05); / 稍微放大 /
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); / 阴影扩散并透明 /
}
100% {
transform: scale(1); / 回到原始大小 /
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); / 阴影消失 /
}
}

.pulse-button {
animation: pulse 2s infinite ease-in-out;
}

/ 鼠标悬停时暂停动画 /
.pulse-button:hover {
animation-play-state: paused;
transform: scale(1.02); / 悬停时轻微放大 /
}
“`

5.3 加载动画（Loading Spinner）

一个常见的加载指示器。

HTML:

“`html

“`

CSS:

“`css
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 150px; / 容器高度，使spinner居中 /
margin: 50px;
}

.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #09f; / 左边框颜色不同，形成旋转感 /
border-radius: 50%; / 圆形 /
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg); / 旋转一圈 /
}
}

.spinner {
animation: spin 1s linear infinite; / 匀速无限旋转 /
}
“`

5.4 打字机效果（Typewriter Effect）

结合 steps() 步进函数和 overflow: hidden 来模拟文字逐字显示。

HTML:

“`html

欢迎来到CSS动画世界！

“`

CSS:

“`css
.typewriter {
font-family: monospace; / 等宽字体更适合 /
font-size: 24px;
width: 0; / 初始宽度为0 /
overflow: hidden; / 隐藏超出宽度的内容 /
white-space: nowrap; / 文本不换行 /
border-right: 3px solid orange; / 模拟光标 /
margin: 50px;
}

/ 计算文本长度，例如“欢迎来到CSS动画世界！”有11个汉字+1个叹号，共12个字符 /
/ 假设每个字符占1rem，那么总宽度大约是12rem /
/ 为了保险，可以稍微放大，或者通过JS动态获取宽度 /
/ 这里我们估算一下：12个字符，每个字符按20px算，就是240px /
@keyframes typing {
from {
width: 0; / 从0宽度开始 /
}
to {
width: 260px; / 最终宽度 /
}
}

@keyframes blink-caret {
from, to {
border-color: transparent; / 光标透明 /
}
50% {
border-color: orange; / 光标显示 /
}
}

.typewriter {
/ typing动画：
duration: 3s
timing-function: steps(12, end) – 12步，在每一步的结束点跳跃，模拟逐字显示
fill-mode: forwards – 动画结束后保持最终状态
/
animation:
typing 3s steps(13, end) forwards, / 13步是因为一个字符一个字符跳，从0到12 /
blink-caret .75s step-end infinite; / 光标闪烁动画 /
}
“`

6. 进阶话题与最佳实践

6.1 浏览器前缀

过去，为了兼容不同的浏览器，你需要为CSS动画属性添加前缀，例如：

-webkit- (Chrome, Safari, Opera, Edge旧版本)
-moz- (Firefox)
-o- (Opera旧版本)
-ms- (Internet Explorer)

示例：

“`css
@-webkit-keyframes myAnimation { / … / }
@keyframes myAnimation { / … / }

.element {
-webkit-animation: myAnimation 2s;
animation: myAnimation 2s;
}
“`

现代实践： 如今，主流浏览器对CSS动画的支持已经非常完善，大多数情况下不再需要手动添加前缀。你可以依赖像 Autoprefixer 这样的工具（通常集成在构建工具如Webpack、Gulp、Parcel中）来自动处理前缀，这会大大简化你的工作流程。对于初学者，暂时可以不必过于担心前缀问题，了解其存在即可。

6.2 性能优化

虽然CSS动画通常性能优异，但仍然有一些最佳实践可以确保动画的流畅性：

优先使用 transform 和 opacity： 这两个属性的变化不会引起页面的重排（reflow）和重绘（repaint），它们可以直接在GPU上合成，性能最高。
避免动画 width、height、top、left、margin、padding 等会引起布局变化的属性： 改变这些属性会导致浏览器重新计算和布局页面，从而引发性能问题（即“回流”或“重排”），尤其是在复杂页面中会导致动画卡顿。
使用 will-change 属性（谨慎使用）： will-change 属性可以提前告诉浏览器元素将要发生哪些变化，从而让浏览器进行优化。但滥用此属性可能适得其反，因为浏览器可能会分配过多的资源。只在你确实知道元素将要进行复杂动画时使用。
css .element { will-change: transform, opacity; /* 告诉浏览器这个元素会发生transform和opacity变化 */ }
动画的复杂性： 避免过多的复杂动画同时运行，这会增加浏览器的渲染负担。
硬件加速： 某些情况下，可以通过添加一个小的 transform 属性来强制浏览器开启硬件加速，例如 transform: translateZ(0); 或 transform: translate3d(0,0,0);。但这并不是万能药，也并非总是必要的。

6.3 多个动画叠加

一个元素可以同时应用多个动画。你只需在animation属性中使用逗号将它们分隔开。

示例：

css .multiple-animations { animation: colorChange 2s linear infinite alternate, /* 颜色动画 */ moveAndRotate 3s ease-in-out infinite; /* 移动旋转动画 */ }

每个动画的属性（名称、时长、速度曲线等）都需要独立指定。

6.4 JavaScript 控制动画

虽然CSS动画本身是声明式的，但有时你可能需要JavaScript来动态控制动画，例如：

根据用户行为（点击、滚动）启动或暂停动画。
在动画播放到某个特定点时触发其他事件。
动态修改动画属性。

你可以通过修改元素的 animation-play-state 属性来暂停或播放动画：

“`javascript
const box = document.querySelector(‘.box’);

box.addEventListener(‘click’, () => {
if (box.style.animationPlayState === ‘paused’) {
box.style.animationPlayState = ‘running’;
} else {
box.style.animationPlayState = ‘paused’;
}
});
“`

CSS动画还提供了一些事件，可以通过JavaScript监听：

animationstart：动画开始时触发。
animationend：动画结束时触发。
animationiteration：动画循环一次后触发（如果 animation-iteration-count 大于1或为infinite）。

javascript box.addEventListener('animationend', () => { console.log('动画播放完毕！'); });

6.5 响应式动画与用户偏好

在设计动画时，要考虑到不同设备和用户的需求：

屏幕尺寸： 动画效果在小屏幕设备上可能需要调整。
性能较差的设备： 某些设备可能无法流畅运行复杂的动画。
用户偏好： 考虑到部分用户可能对动画敏感或不适。CSS提供了 @media (prefers-reduced-motion: reduce) 查询，允许你为那些偏好减少动态效果的用户提供简化的体验。
css @media (prefers-reduced-motion: reduce) { .some-animated-element { animation: none !important; /* 关闭动画 */ transition: none !important; /* 关闭过渡 */ } }

7. 总结与展望

通过本教程，你已经学习了CSS动画的核心概念：

@keyframes 规则：定义动画的各个阶段。
animation 属性及其子属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state

你还掌握了如何创建常见的动画效果，并了解了性能优化、兼容性以及与JavaScript交互等进阶知识。

CSS动画的世界远不止于此。你可以尝试更多复杂的 @keyframes 组合、探索 cubic-bezier() 函数的奥秘，或者结合 calc() 和 CSS 变量创建更具动态性的动画。

下一步：

实践！ 动手尝试本文中的所有示例，并尝试修改参数，观察效果。
多看多学： 浏览一些优秀的网页设计案例，分析它们是如何运用CSS动画的。
挑战自己： 尝试实现一些更复杂的动画效果，例如视差滚动动画、路径动画等。
学习CSS Transitions： CSS过渡（Transitions）是另一种实现简单动画的方法，适用于状态之间的平滑过渡，与动画（Animations）是互补的关系。
深入JavaScript动画库： 当CSS动画无法满足你的需求时，可以考虑学习GreenSock (GSAP) 或 Anime.js 等JavaScript动画库，它们提供了更强大的控制能力。

恭喜你迈出了CSS动画学习的第一步！现在，是时候发挥你的创意，让你的网页生动起来了！

CSS动画入门教程：让你的网页动起来！

1. 为什么选择CSS动画？

2. 前置知识

3. CSS动画的核心：@keyframes 规则

3.1 from / to 语法

3.2 百分比语法

4. 应用动画：animation 属性及其子属性

4.1 animation-name

4.2 animation-duration

4.3 animation-timing-function

4.4 animation-delay

4.5 animation-iteration-count

4.6 animation-direction

4.7 animation-fill-mode

4.8 animation-play-state

4.9 animation 简写属性

5. 实用动画示例

5.1 弹跳球效果

5.2 脉冲效果（Pulse Effect）

5.3 加载动画（Loading Spinner）

5.4 打字机效果（Typewriter Effect）

6. 进阶话题与最佳实践

6.1 浏览器前缀

6.2 性能优化

6.3 多个动画叠加

6.4 JavaScript 控制动画

6.5 响应式动画与用户偏好

7. 总结与展望

发表评论 取消回复

3. CSS动画的核心：`@keyframes` 规则

3.1 `from` / `to` 语法

4. 应用动画：`animation` 属性及其子属性

4.1 `animation-name`

4.2 `animation-duration`

4.3 `animation-timing-function`

4.4 `animation-delay`

4.5 `animation-iteration-count`

4.6 `animation-direction`

4.7 `animation-fill-mode`

4.8 `animation-play-state`

4.9 `animation` 简写属性

发表评论取消回复