在这一篇中，我们将探讨 CSS 动画的基础知识，了解如何创建和使用动画效果。我们会借助实例和代码，逐步引导你掌握核心概念，同时与上一篇《过渡效果》及下一篇《关键帧动画》相连贯。
动画的概念
CSS 动画是指通过对 CSS 属性值的变化创建视觉效果的一种方法。与过渡不同，动画可以控制多个状态之间的变化，并且可以反复播放。动画由两部分组成：关键帧和动画属性。
动画属性
在创建 CSS 动画时，需要设置以下几个关键属性：
animation-name: 定义要使用的动画名称。animation-duration: 定义动画持续的时间。animation-timing-function: 定义动画的速度曲线。animation-delay: 动画开始前的延迟时间。animation-iteration-count: 动画的重复次数。animation-direction: 动画播放的方向（正向、反向等）。animation-fill-mode: 动画在播放结束后的状态。
1
2
3
4
5
6
7
8
9
| .example {
animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
|
关键帧
关键帧是动画的关键部分，它允许你定义在动画过程中的不同状态。我们使用 @keyframes 规则来定义关键帧。
以下是一个简单的动画示例：一个元素在垂直方向上跳动（bounce）。
1
2
3
4
5
6
7
8
9
10
11
| @keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
|
实际案例
来看看一个具体的案例，我们将创建一个按钮，当鼠标悬停时，它会进行跳动的动画效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画示例</title>
<style>
.button {
padding: 15px 30px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
font-size: 16px;
animation-name: bounce;
animation-duration: 0s;
animation-fill-mode: forwards;
}
.button:hover {
animation-duration: 0.5s;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<button class="button">悬停我！</button>
</body>
</html>
|
在这个示例中，我们首先定义了一个名为 bounce 的动画。这个动画会使按钮在鼠标悬停时进行跳动。同时，我们将 animation-duration 属性设置为 0s，以确保按钮在默认状态下不会动。
当用户将鼠标悬停在按钮上后，animation-duration 的值被修改为 0.5s，动画就会开始播放。
小结
在本篇中，我们了解了 CSS 动画的基本概念和重要属性，包括动画的结构和关键帧的定义。我们还通过一个实际的按钮跳动案例，展示了怎样利用这些知识创建简单的动画效果。
在接下来的《关键帧动画》中，我们将详细讨论关键帧的更多用法，以及如何更灵活地控制动画的过程。您会发现，掌握了动画基础后，您将能轻松创建出复杂而生动的动画效果。
