CSS 动画是一种在网页上创建动态效果的方式，它允许你改变元素的样式随时间变化。CSS 动画主要通过 @keyframes 规则以及 animation 属性来实现。
CSS动画基本规则
1. @keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中，你需要指定动画的名称，并定义动画在不同时间点的样式。
例如，一个简单的淡入淡出动画可以这样定义：
@keyframes fadeInOut {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
在这个例子中，动画名称为 fadeInOut。开始时（0%），元素的透明度为 0（完全透明）。在中间（50%），元素的透明度为 1（完全不透明）。结束时（100%），元素的透明度再次为 0（完全透明）。
2. animation 属性
animation 属性用于应用 @keyframes 动画。这个属性可以包含多个值，以空格分隔，这些值定义了动画的各种特性。
例如，要应用上面的 fadeInOut 动画，你可以这样写：
div {
width: 100px;
height: 100px;
background: red;
animation: fadeInOut 2s ease-in-out infinite;
}
在这个例子中，animation 属性的值定义了以下特性：
fadeInOut：动画名称。2s：动画完成一个周期所需的时间（2 秒）。ease-in-out：动画的速度曲线。ease-in-out表示动画开始时速度较慢，然后加速，最后再次减速。infinite：动画应该无限次地重复。
3. 其他 animation 属性值
除了上面提到的值，animation 属性还可以包含其他值，如：
animation-delay：动画开始前的延迟时间。animation-direction：动画的播放方向（正常、反向、交替等）。animation-fill-mode：动画开始前和结束后元素的样式（保持结束状态、返回原始状态等）。animation-iteration-count：动画应该播放的次数（可以是无限次）。animation-play-state：动画是否正在运行或已暂停。
这些值可以单独作为 CSS 属性使用，也可以作为 animation 属性的值之一。
4. 浏览器兼容性
虽然大多数现代浏览器都支持 CSS 动画，但某些较旧的浏览器可能不支持或只支持部分功能。因此，在使用 CSS 动画时，最好检查目标浏览器的兼容性情况。
如何使用
要使用CSS动画，你需要遵循几个步骤来定义和应用动画。以下是一个基本的指南：
1. 定义@keyframes规则
首先，你需要使用@keyframes规则来定义动画的各个阶段。例如，创建一个简单的从左到右移动的动画：
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
或者，你也可以使用百分比来定义动画的关键帧：
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
2. 应用animation属性
接下来，你需要将动画应用到某个HTML元素上。这可以通过使用animation属性或相关的子属性来完成。例如：
div {
width: 50px;
height: 50px;
background-color: red;
/* 应用动画 */
animation-name: moveRight; /* 动画名称 */
animation-duration: 2s; /* 动画完成时间 */
animation-timing-function: linear; /* 动画的速度曲线 */
animation-iteration-count: infinite; /* 动画重复次数 */
}
或者，你可以使用简写属性animation来一次性设置所有动画属性：
div {
width: 50px;
height: 50px;
background-color: red;
animation: moveRight 2s linear infinite;
}
3. 控制动画的其他属性（可选）
你还可以设置其他动画属性，如animation-delay（动画开始前的延迟时间）、animation-direction（动画的播放方向）和animation-fill-mode（动画开始前和结束后元素的样式）。
4. 浏览器兼容性
确保检查你使用的CSS动画属性在不同浏览器中的兼容性。一些旧的浏览器可能不支持某些动画特性。如果需要支持这些浏览器，你可以使用浏览器前缀（如-webkit-、-moz-、-o-和-ms-）来提供备选的动画实现。
5. 使用JavaScript控制动画（可选）
虽然CSS本身提供了丰富的动画控制功能，但你也可以使用JavaScript来动态地控制动画的播放、暂停、反向播放等。这可以通过操作DOM元素的animationPlayState、animationDirection等属性来实现。
6. 示例HTML结构
最后，确保你的HTML结构中有相应的元素来应用CSS动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* 在这里放置你的CSS代码 */
</style>
</head>
<body>
<div></div> <!-- 这个div元素将应用动画 -->
</body>
</html>