CSS 动画可以让网页元素生动起来，通过一些简单的属性设置，我们就能实现富有动感的效果。在这篇文章中，我们将介绍如何使用纯 CSS 实现几种常见的动画效果，帮助你为网页增添更多趣味和互动性。
一、CSS 动画基础
CSS 动画由两个主要部分组成：
@keyframes 规则：定义动画的关键帧，描述动画的开始、结束及中间过程。
animation 属性：将定义好的 @keyframes 动画应用到元素上。
1.1 @keyframes 规则
@keyframes 规则用于创建动画的关键帧，它允许你指定动画的不同阶段。基本的语法如下：
cssCopy Code@keyframes animationName {
0% { /* 动画起始状态 */ }
50% { /* 动画的中间状态 */ }
100% { /* 动画的结束状态 */ }
}
0% 代表动画的开始状态。
100% 代表动画的结束状态。
可以使用多个百分比来指定中间状态。
1.2 animation 属性
animation 属性用于将 @keyframes 规则应用到一个元素上，常见的语法如下：
cssCopy Codeelement {
animation: animationName duration timingFunction delay iterationCount direction;
}
animation-name：指定动画的名称，对应 @keyframes 中定义的名称。
animation-duration：指定动画持续的时间。
animation-timing-function：定义动画的速度曲线(如线性、缓慢开始等)。
animation-delay：设置动画延迟时间。
animation-iteration-count：设置动画的播放次数。
animation-direction：设置动画的播放方向(如正常播放或反向播放)。
二、实现简单的 CSS 动画
接下来，我们将通过几个例子来演示如何用 CSS 实现简单的动画效果。
2.1 动画 1：平移动画
平移动画是指元素在页面上水平或垂直移动。以下示例演示了一个元素从左到右的平移动画。
HTML 代码：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平移动画</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代码：
cssCopy Code/* 设置页面背景 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* 定义动画 */
.moving-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveRight 3s linear infinite; /* 动画名称：moveRight，时长：3秒，线性，重复无限次 */
}
@keyframes moveRight {
0% {
transform: translateX(0); /* 起始位置 */
}
100% {
transform: translateX(300px); /* 结束位置 */
}
}
在这个例子中，.moving-box 元素将会在 3 秒内从左侧平移到右侧，并且该动画将无限循环。
2.2 动画 2：渐变透明度动画
这个动画展示了元素透明度的变化，从完全透明到完全不透明，形成渐变的效果。
HTML 代码：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变透明度动画</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代码：
cssCopy Codebody {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.fade-box {
width: 150px;
height: 150px;
background-color: #e74c3c;
opacity: 0; /* 初始透明度 */
animation: fadeIn 4s ease-in-out infinite; /* 动画名称：fadeIn，时长：4秒，缓入缓出 */
}
@keyframes fadeIn {
0% {
opacity: 0; /* 起始透明度 */
}
50% {
opacity: 1; /* 中间透明度 */
}
100% {
opacity: 0; /* 结束透明度 */
}
}
这个动画使 .fade-box 元素在 4 秒内从完全透明逐渐变为不透明，再变回透明，实现渐变效果。
2.3 动画 3：旋转动画
旋转动画使元素围绕其中心点旋转。下面的例子演示了一个旋转的方块。
HTML 代码：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转动画</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代码：
cssCopy Codebody {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.rotate-box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: rotate 5s linear infinite; /* 动画名称：rotate，时长：5秒，线性，重复无限次 */
}
@keyframes rotate {
0% {
transform: rotate(0deg); /* 起始角度 */
}
100% {
transform: rotate(360deg); /* 结束角度 */
}
}
这个例子使 .rotate-box 元素在 5 秒内旋转 360 度，形成一个连续的旋转效果。
三、其他常见的 CSS 动画效果
3.1 缩放动画
通过调整元素的大小，制作缩放效果。
cssCopy Code@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.scale-box {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation: scaleUp 3s ease-in-out infinite;
}
3.2 移动与旋转动画
结合平移和旋转，制作更复杂的动画。
cssCopy Code@keyframes moveRotate {
0% {
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(200px) rotate(180deg);
}
100% {
transform: translateX(0) rotate(360deg);
}
}
.move-rotate-box {
width: 100px;
height: 100px;
background-color: #f39c12;
animation: moveRotate 4s ease-in-out infinite;
}
CSS 动画是实现动态效果的强大工具，可以提升网页的交互性和视觉效果。通过简单的 @keyframes 和 animation 属性，我们能够创建平移、旋转、透明度变化、缩放等各种动画效果。在实际开发中，你可以将这些基本动画技巧灵活运用，创造出更丰富的网页体验。
