20 过渡与动画之动画基础
在这一篇中，我们将探讨 CSS 动画的基础知识，了解如何创建和使用动画效果。我们会借助实例和代码，逐步引导你掌握核心概念，同时与上一篇《过渡效果》及下一篇《关键帧动画》相连贯。
动画的概念
CSS 动画是指通过对 CSS 属性值的变化创建视觉效果的一种方法。与过渡不同，动画可以控制多个状态之间的变化，并且可以反复播放。动画由两部分组成：关键帧和动画属性。
动画属性
在创建 CSS 动画时，需要设置以下几个关键属性：
animation-name: 定义要使用的动画名称。animation-duration: 定义动画持续的时间。animation-timing-function: 定义动画的速度曲线。animation-delay: 动画开始前的延迟时间。animation-iteration-count: 动画的重复次数。animation-direction: 动画播放的方向（正向、反向等）。animation-fill-mode: 动画在播放结束后的状态。
.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）。
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0); /* 起始位置 */
}
40% {
transform: translateY(-30px); /* 跳起 */
}
60% {
transform: translateY(-15px); /* 上下震动 */
}
}
实际案例
来看看一个具体的案例，我们将创建一个按钮，当鼠标悬停时，它会进行跳动的动画效果。
<!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; /* 使用 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 动画的基本概念和重要属性，包括动画的结构和关键帧的定义。我们还通过一个实际的按钮跳动案例，展示了怎样利用这些知识创建简单的动画效果。
在接下来的《关键帧动画》中，我们将详细讨论关键帧的更多用法，以及如何更灵活地控制动画的过程。您会发现，掌握了动画基础后，您将能轻松创建出复杂而生动的动画效果。
