4.3 动画（animation）：复杂自主运动的实现
动画是 CSS3 动态效果中最灵活的技术，它通过关键帧（@keyframes） 定义元素在不同时间点的样式状态，并结合动画属性控制运动过程，可实现无需用户触发的自主循环运动（如加载动画、轮播图等）。
动画实现的核心结构：
- @keyframes 关键帧：定义动画在不同阶段的样式，通过
from（起始帧）、to（结束帧）或百分比（如0%、50%、100%）指定关键时间点的样式； - 动画属性：将关键帧绑定到元素，并控制动画的时长、延迟、播放次数、方向等。
案例 4-3：加载动画（圆形旋转+颜色渐变）
以下代码实现了一个无限循环的加载动画，关键属性已标注注释：
css
复制代码
/* 定义关键帧：circle-spin 动画 */
@keyframes circle-spin {
0% {
transform: rotate(0deg); /* 起始状态：旋转 0° */
background-color: #4a90e2; /* 起始颜色：蓝色 */
}
50% {
background-color: #5cb85c; /* 中间状态：绿色 */
}
100% {
transform: rotate(360deg); /* 结束状态：旋转 360° */
background-color: #e74c3c; /* 结束颜色：红色 */
}
}
.loader {
width: 40px;
height: 40px;
border-radius: 50%; /* 圆形 */
margin: 50px auto;
/* 绑定动画：名称为 circle-spin，时长 1.5 秒，线性速度 */
animation-name: circle-spin;
animation-duration: 1.5s;
animation-timing-function: linear;
/* 循环播放：infinite 表示无限次 */
animation-iteration-count: infinite;
}在上述代码中，@keyframes circle-spin 定义了动画的三个关键帧：0% 时圆形为蓝色且不旋转，50% 时变为绿色，100% 时旋转 360° 并变为红色；animation-iteration-count: infinite 使动画无限循环播放，形成持续的加载效果。